import React, { useEffect, useState } from "react";
import { theme } from "data/dataMx";
import { Input } from "./styles";
import { CSSObject } from "styled-components";
import { AtomBody } from "../Typography/Body";

export interface ICheckboxProps {
  /** Active if you want to active the checkbox */
  checked: boolean;
  onChange?: any;
  /** Disabled checkbox if it is active */
  disabled?: boolean;
  value?: any;
  /** Styles in format CSSObject */
  styles?: CSSObject;
  label?: string;
}

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

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

  const handleChange = (e: any) => {
    setIsChecked(!isChecked);
    onChange && onChange(e);
  };
  return (
    <>
      <Input
        type="checkbox"
        checked={isChecked}
        disabled={disabled}
        onChange={(e) => handleChange(e)}
        color={theme.neutral700}
        colorDisabled={theme.neutral500}
        value={value}
        styles={styles}
      />
      <AtomBody
        align="left"
        color={"neutral600"}
        size="medium"
        text={label}
        weight="regular"
        styles={{
          marginLeft: "19px",
        }}
        onClick={() => {
          const fakecheck = {
            target: {
              checked: !isChecked,
            },
          };
          handleChange(fakecheck);
        }}
      />
    </>
  );
};
