import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import Tick from '../icons/tick-white.svg';
import Remove1Icon from '../icons/remove1-white.svg';
import { classNames } from '../utils';

export interface CheckboxProps {
  onChange: (isChecked: boolean) => void;
  checked?: boolean;
  disabled?: boolean;
  indeterminate?: boolean;
}

export const Checkbox: React.FC<CheckboxProps> = ({
  onChange,
  checked = false,
  disabled = false,
  indeterminate = false,
}) => {
  const handlePress = () => {
    onChange(!checked);
  };

  return (
    <TouchableOpacity onPress={handlePress} disabled={disabled}>
      <View className="flex-row items-center">
        <View
          className={classNames(
            'w-6 h-6 flex justify-center items-center border rounded mr-2',
            `${disabled ? 'border-neutral-600' : 'border-neutral-400'}`,
            `${checked ? 'border-white' : ''}`
          )}
        >
          {checked && (
            <View
              className={`w-6 h-6 flex justify-center items-center ${
                disabled ? 'bg-brand-500 opacity-50' : 'bg-brand-500'
              }  rounded`}
            >
              {indeterminate ? (
                <Remove1Icon height={16} width={16} />
              ) : (
                <Tick height={16} width={16} />
              )}
            </View>
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
};