import React from 'react';
import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native';
import {IconCheck, IconMinus} from '@tabler/icons-react-native';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export interface CheckProps {
  checked?: boolean;
  disabled?: boolean;
  error?: boolean;
  semiChecked?: boolean;
  onPress?: () => void;
  pointerEvents?: PressableProps['pointerEvents'];
  style?: StyleProp<ViewStyle>;
}

export function Check({
  checked,
  disabled,
  error,
  onPress,
  semiChecked,
  pointerEvents,
  style,
}: CheckProps) {
  const {theme, iconSizes} = useTheme();
  const borderColor = error
    ? theme.button.background.error.focus
    : disabled
    ? theme.button.background.error.disabled
    : semiChecked
    ? theme.button.background.primary.default
    : theme.text.neutral.lighter;

  return (
    <Pressable
      onPress={onPress}
      pointerEvents={pointerEvents}
      style={[
        styles.check,
        {borderColor},
        checked && {
          ...styles.checked,
          backgroundColor: theme.button.background.primary.default,
        },
        disabled &&
          (checked || semiChecked) && {
            ...styles.disabledChecked,
            backgroundColor: theme.button.background.error.disabled,
          },
        style,
      ]}
      disabled={disabled}
      accessible
      accessibilityRole="checkbox"
      accessibilityState={{checked, disabled}}
      accessibilityLabel="checkbox">
      {checked ? (
        <IconCheck
          color={theme.text.neutral.inverted}
          size={iconSizes.x5}
          testID="icon-checked"
        />
      ) : semiChecked ? (
        <IconMinus
          color={theme.text.neutral[disabled ? 'disabled' : 'brand']}
          size={iconSizes.x5}
          testID="icon-semi-checked"
        />
      ) : null}
    </Pressable>
  );
}
