import React, { useState, useEffect } from "react";
import { keysTheme, theme } from "data/dataMx";
import {
  Checkbox,
  CheckboxContainer,
  CheckboxContent,
  CheckboxCheckmarkLeft,
  CheckboxCheckmarkRight,
} from "./styles";
import { AtomBody } from "../Typography/Body";

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;
  /* Color for the border and background of the checkbox */
  showColor?: keysTheme;
  label?: string;
}

export const AtomCheckbox = ({
  onChange,
  checked = false,
  disabled = false,
  value = "",
  showColor = "neutral700",
  label = "",
}: 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
              : isChecked
              ? theme[showColor]
              : theme.neutral600
          }
        >
          {isChecked && (
            <CheckboxContent
              colorShow={disabled ? theme.neutral500 : theme[showColor]}
            >
              <CheckboxCheckmarkLeft />
              <CheckboxCheckmarkRight />
            </CheckboxContent>
          )}
        </CheckboxContainer>
      </Checkbox>
      <AtomBody
        align="left"
        color={"neutral600"}
        size="medium"
        styles={{ marginLeft: "19px" }}
        text={label}
        weight="semibold"
        onPress={() => handleChange(!isChecked)}
      />
    </>
  );
};
