import { radius } from '../../utils/radius.js'
import { colors } from '../../utils/colors.js'
import { styled } from 'inlines'
import { Text } from '../Text/index.js'

type SwitchInputProps = {
  value?: boolean
  onChange: (value: boolean) => void
  disabled?: boolean
  description?: string
}

function SwitchInput({
  value,
  onChange,
  disabled,
  description,
}: SwitchInputProps) {
  return (
    <label
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 12,
        cursor: 'pointer',
        userSelect: 'none',
        ...(disabled && { cursor: 'not-allowed' }),
      }}
    >
      <styled.div
        data-disabled={disabled ? disabled : undefined}
        data-checked={value ? value : undefined}
        style={{
          position: 'relative',
          display: 'inline-flex',
          width: 32,
          height: 20,
          padding: 2,
          borderRadius: radius.full,
          background: colors.neutral20Adjusted,
          outline: 'none',
          border: 'none',
          '&[data-checked]': {
            background: colors.neutral100,
          },
          '&:has(:focus-visible):not([data-disabled])': {
            outline: `4px solid ${colors.neutral20}`,
          },
          '&[data-error]': {
            background: colors.red100,
          },
          '&[data-error]:has(:focus-visible):not([data-disabled])': {
            outline: `4px solid ${colors.red60}`,
          },
          '&[data-disabled]': {
            background: colors.neutral20Adjusted,
          },
          // transition: 'all 150ms ease-out',
        }}
      >
        <div
          style={{
            width: 16,
            height: 16,
            borderRadius: radius.full,
            background: colors.neutralInverted100,
            ...(value && {
              marginLeft: 12,
              background: colors.neutralInverted100,
            }),
            ...(disabled && {
              background: colors.neutralInverted60,
            }),
            // transition: 'all 150ms ease-out',
          }}
        />
        <input
          style={{
            position: 'absolute',
            width: 1,
            height: 1,
            padding: 0,
            margin: -1,
            overflow: 'hidden',
            clip: 'rect(0, 0, 0, 0)',
            whiteSpace: 'nowrap',
            borderWidth: 0,
          }}
          type="checkbox"
          checked={value ?? false}
          onChange={() => {
            if (disabled) return

            onChange(!value)
          }}
          disabled={disabled}
        />
      </styled.div>
      {description && (
        <Text
          variant="display-regular"
          color={value && !disabled ? 'neutral100' : 'neutral60'}
        >
          {description}
        </Text>
      )}
    </label>
  )
}

export type { SwitchInputProps }
export { SwitchInput }
