import React from 'react';
import { transparentize } from 'polished';
import { Platform } from 'react-native';
import { VisuallyHidden } from '@react-aria/visually-hidden';

import { Box } from '../../atoms/Box/Box';
import { Icon } from '../../atoms/Icon/Icon';
import { Pressable, PressableProps } from '../../atoms/Pressable/Pressable';
import { ColorsWithHue } from '../../../theme/primitives/colors';
import { useResolvedColor } from '../../../hooks/useResolvedColor';

export interface CheckboxProps extends PressableProps {
  checked?: boolean;
  setChecked?: (newValue: boolean) => void;
  color?: ColorsWithHue;
  uncheckedColor?: ColorsWithHue;
  indeterminate?: boolean;
}

export const Checkbox = ({
  checked,
  setChecked,
  color = 'blue.500',
  uncheckedColor = 'grey.400',
  disabled,
  opacity,
  ...rest
}: CheckboxProps) => {
  const pressColor = useResolvedColor(color);

  const handleChange = () => setChecked?.(!checked);

  const resolveInteractionStyle = (pressed: boolean) => {
    return pressed
      ? {
          backgroundColor: transparentize(0.8, pressColor as string),
        }
      : undefined;
  };

  return (
    <Pressable
      disabled={disabled}
      onPress={Platform.OS === 'web' ? undefined : handleChange}
      opacity={disabled ? 0.6 : opacity}
      // @ts-ignore Label is only supported on the Web platform
      accessibilityRole={Platform.OS === 'web' ? 'label' : 'checkbox'}
      accessibilityState={{ checked, disabled: Boolean(disabled) }}
      accessible
      {...rest}
    >
      {({ pressed }) => (
        <Box justifyContent="center" alignItems="center">
          {pressed && (
            <Box
              style={resolveInteractionStyle(pressed)}
              position="absolute"
              zIndex={-1}
              rounded="full"
              p="lg"
            />
          )}

          {Platform.OS === 'web' && (
            <VisuallyHidden>
              <input
                type="checkbox"
                onChange={handleChange}
                disabled={Boolean(disabled)}
              />
            </VisuallyHidden>
          )}

          <Box
            rounded="md"
            p={checked ? '3xs' : undefined}
            bg={checked ? color : 'grey.50'}
            border={checked ? 'none' : 'md'}
            borderColor={uncheckedColor}
          >
            <Icon
              selectable={false}
              allowFontScaling={false}
              name="check"
              color="grey.50"
            />
          </Box>
        </Box>
      )}
    </Pressable>
  );
};