import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { hideVisually } from 'polished';
import { defaultThemeProp } from '../../theme';
import { useDirection, useUID } from '../../hooks';
import Flex from '../Flex';
import { getHoverColors, readableColor } from '../../styles';
import Icon, { StyledIcon, registerIcon } from '../Icon';
import * as checkIcon from '../Icon/icons/check.icon';
import { tryCatch } from '../../utils';
registerIcon(checkIcon);
export const SwitchLabel = styled.label(({ theme: { base, components: { switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off } } } }) => {
    return css `
      position: relative;
      cursor: pointer;
      padding-inline-end: calc(${width} + 0.5rem);
      height: ${height};
      width: 100%;

      @media (pointer: coarse) {
        padding-inline-end: calc(${touchWidth} + 0.5rem);
        height: ${touchHeight};
      }

      /** Checkmark */
      & > ${StyledIcon} {
        position: absolute;
        inset-inline-end: calc(0.5 * ${width} + 0.25rem);
        height: calc(0.5 * ${height});
        width: calc(0.5 * ${height});

        @media (pointer: coarse) {
          inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);
          height: calc(0.5 * ${touchHeight});
          width: calc(0.5 * ${touchHeight});
        }

        /* Use preferred color for icon because track takes opposite of background color */
        @media (forced-colors: active) and (prefers-color-scheme: dark) {
          fill: black;
        }

        @media (forced-colors: active) and (prefers-color-scheme: light) {
          fill: white;
        }
      }

      /** Track */
      &::before {
        position: absolute;
        content: '';
        inset-inline-end: 0;
        width: ${width};
        border: solid calc(${height} / 2) ${off.color};
        transition: background-color calc(0.5 * ${base.animation.speed})
          ${base.animation.timing.ease};
        border-radius: calc(9999 * ${base['border-radius']});

        @media (pointer: coarse) {
          width: ${touchWidth};
          height: ${touchHeight};
        }
      }

      /** Switch */
      &::after {
        position: absolute;
        content: '';
        inset-inline-end: calc(${width} - ${height} + 0.0625rem);
        height: calc(${height} - 0.125rem);
        width: calc(${height} - 0.125rem);
        background-color: ${base.palette['primary-background']};
        transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};
        border-radius: calc(9999 * ${base['border-radius']});

        @media (pointer: coarse) {
          inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);
          height: calc(${touchHeight} - 0.125rem);
          width: calc(${touchHeight} - 0.125rem);
        }
      }
    `;
});
SwitchLabel.defaultProps = defaultThemeProp;
export const SwitchInput = styled.input(({ theme: { base, components: { 'form-control': { ':focus': { 'box-shadow': shadow } }, switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off } } } }) => {
    const { ltr } = useDirection();
    const checkmarkColor = tryCatch(() => readableColor(on.color));
    const onHoverColors = getHoverColors(on.color);
    const offHoverColors = getHoverColors(off.color);
    return css `
      ${hideVisually}

      & + ${SwitchLabel} {
        min-height: ${base['hit-area']['mouse-min']};
        @media (pointer: coarse) {
          min-height: ${base['hit-area']['finger-min']};
        }
      }

      & + ${SwitchLabel} > ${StyledIcon} {
        color: ${checkmarkColor};
      }

      &:checked + ${SwitchLabel}::before {
        border-color: ${on.color};
      }

      &:checked + ${SwitchLabel}::after {
        transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));

        @media (pointer: coarse) {
          transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));
        }
      }

      &:hover + ${SwitchLabel} > ${StyledIcon} {
        color: ${onHoverColors.foreground};
      }

      &:hover:checked + ${SwitchLabel}::before {
        border-color: ${onHoverColors.background};
      }

      &:hover + ${SwitchLabel}::before {
        border-color: ${offHoverColors.background};
      }

      &:focus + ${SwitchLabel}::before {
        box-shadow: ${shadow};
      }

      &:disabled + ${SwitchLabel} {
        opacity: ${base['disabled-opacity']};
      }
    `;
});
SwitchInput.defaultProps = defaultThemeProp;
export const StyledSwitch = styled.div ``;
const Switch = forwardRef(function Switch(props, ref) {
    const uid = useUID();
    const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;
    return (_jsxs(StyledSwitch, { children: [_jsx(SwitchInput, { ...restProps, id: id, type: 'checkbox', role: 'switch', checked: on, disabled: disabled, onChange: onChange, ref: ref }), _jsxs(Flex, { container: { alignItems: 'center' }, as: SwitchLabel, htmlFor: id, children: [label, on && _jsx(Icon, { name: 'check' })] })] }));
});
export default Switch;
//# sourceMappingURL=Switch.js.map