import React, { useState, useEffect } from 'react';
import { theme } from 'data/dataMx';
import { 
  Checkbox,
  CheckboxContainer,
  CheckboxContent,
  CheckboxCheckmarkLeft,
  CheckboxCheckmarkRight
} from './styles';

export interface ICheckboxProps {
  onChange: any;
  /** Active if you want to active the checkbox */
  checked?: boolean;
  /** Disabled checkbox if it is active */
  disabled?: boolean;
  /* the value that will have the checkbox */
  value?: any;
}

export const AtomCheckbox = ({ onChange, checked = false, disabled = false, value = '' }: ICheckboxProps) => {
  const [isChecked, setIsChecked] = useState<boolean>(false);

  useEffect(() => {
    setIsChecked(checked);
  }, [checked]);

  const handleChange = (checkValue: boolean) => {
    if (!disabled) {
      setIsChecked(!isChecked);
      onChange(checkValue);
    }
  };

  return (
    <Checkbox
      onPress={() => handleChange(!isChecked)}
      testID="checkbox"
      value={value}>
      <CheckboxContainer colorShow={disabled ? theme.neutral500 : theme.neutral700}>
        {isChecked && (
          <CheckboxContent colorShow={disabled ? theme.neutral500 : theme.neutral700}>
            <CheckboxCheckmarkLeft />
            <CheckboxCheckmarkRight />
          </CheckboxContent>
        )}
      </CheckboxContainer>
    </Checkbox>
  );
}
