import React from 'react';
import { SBox } from '../s-components/layout/s-box';
import { theme } from '../../app/theme';
import { Icon } from './icon';
import { Touchable } from './touchable';

type TProps = {
  onPress?: () => void;
  checked?: boolean;
  disabled?: boolean;
  isLight?: boolean;
};

export const Checkbox: React.FC<TProps> = ({
  checked = false,
  onPress = () => {},
  disabled = false,
  isLight = false,
}) => {
  const notCheckedBorderColor = disabled
    ? 'lightGray'
    : isLight
    ? 'logan4'
    : 'fiord';

  return (
    <Touchable testID="checkbox-tappable-area" onPress={onPress}>
      {checked ? (
        <SBox
          width={22}
          height={22}
          bg={theme.colors.wildStrawberry}
          borderRadius={4}
          alignItems="center"
          justifyContent="center"
        >
          <Icon name="check-on-boarding" size={14} color={theme.colors.white} />
        </SBox>
      ) : (
        <SBox
          width={22}
          height={22}
          borderWidth={1}
          borderColor={notCheckedBorderColor}
          borderRadius={4}
          opacity={disabled && !isLight ? 0.5 : 1}
        />
      )}
    </Touchable>
  );
};