import React, {
  ChangeEvent,
  MouseEvent,
  useContext,
  useEffect,
  useState,
  useId,
} from "react";
import classnames from "classnames";
import { Box } from "../Box";
import { Icon, ICON_TYPE } from "../Icon";
import { Label } from "../Label";
import { Text } from "../Text";
import { Input, InputProps } from "../Input";
import { Stack, StackProps } from "../Stack";
import { ORIENTATION } from "../../types";
import { bem } from "../../utilities/bem";
import isUndefined from "../../utilities/isUndefined";
import { FormGroupContext } from "../FormGroup/FormGroupContext";

const cn = "Checkbox";

export type CheckboxProps = Omit<InputProps, "checked"> & {
  label?: string;
  /**
   * Hides required styling on Label if it is within a FormGroupContext with
   * `isRequired` equal to true
   */
  hideRequiredStyles?: boolean;
  /**
   * Shows required styling on Label
   */
  isRequired?: boolean;
  /**
   * Determine if the checkbox is checked. An indeterminate checkbox can be
   * displayed by passing the string "indeterminate" instead of true/false.
   */
  checked?: boolean | "indeterminate";
  /**
   * Determines the background color of the checkbox when checked.
   */
  color?: "brandGreen" | "blue";
};

const CheckboxGroup = (props: StackProps) => {
  const { orientation = ORIENTATION.VERTICAL, ...rest } = props;

  return <Stack orientation={orientation} {...rest} />;
};

export enum CheckboxState {
  CHECKED = "checked",
  UNCHECKED = "unchecked",
  INDETERMINATE = "indeterminate",
}

export const Checkbox = ({
  checked,
  children,
  className,
  disabled = false,
  id: idProp,
  label,
  onBlur,
  onChange = () => {},
  onClick,
  onFocus,
  hideRequiredStyles = true,
  isRequired = undefined,
  tabIndex,
  theme: themeProp,
  color = "brandGreen",
  ...rest
}: CheckboxProps) => {
  const { isRequired: isRequiredContext, theme: themeContext } = useContext(
    FormGroupContext,
  );
  const fallbackId = `checkbox-${useId()}`;
  const id = isUndefined(idProp) ? fallbackId : idProp;
  const theme = themeProp || themeContext;

  const classes = classnames([bem(cn), { "is-disabled": disabled }, className]);

  const handleClick = (event: MouseEvent<HTMLInputElement>): void => {
    if (!disabled && onClick) {
      onClick(event);
    }
  };

  let calculatedRequired = false;
  if (isRequired !== undefined) {
    calculatedRequired = isRequired;
  } else if (isRequiredContext !== undefined) {
    calculatedRequired = isRequiredContext;
  }

  const [checkedState, setCheckedState] = useState<CheckboxState>(
    CheckboxState.UNCHECKED,
  );

  useEffect(() => {
    if (checked) {
      if (typeof checked === "string" && checked === "indeterminate") {
        setCheckedState(CheckboxState.INDETERMINATE);
      } else {
        setCheckedState(CheckboxState.CHECKED);
      }
    }
  }, [checked]);

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    let updatedChecked;

    if (checkedState === CheckboxState.CHECKED) {
      updatedChecked = CheckboxState.UNCHECKED;
    } else if (checkedState === CheckboxState.UNCHECKED) {
      updatedChecked = CheckboxState.CHECKED;
    } else if (checkedState === CheckboxState.INDETERMINATE) {
      updatedChecked = CheckboxState.INDETERMINATE;
    } else {
      updatedChecked = CheckboxState.UNCHECKED;
    }

    setCheckedState(updatedChecked as CheckboxState);

    if (onChange) {
      onChange(event);
    }
  };

  const ariaChecked = () => {
    if (checkedState === CheckboxState.INDETERMINATE) {
      return "mixed";
    }

    if (checkedState === CheckboxState.CHECKED) {
      return "true";
    }

    return "false";
  };

  const bareCheckbox = (
    <Box className={bem(cn, { e: "BoxWrapper" })}>
      <Input
        aria-checked={ariaChecked()}
        checked={checkedState === CheckboxState.CHECKED}
        className={bem(cn, { e: "Input" })}
        disabled={disabled}
        id={id}
        onChange={handleChange}
        type="checkbox"
        onFocus={onFocus}
        onBlur={onBlur}
        onClick={label ? handleClick : undefined}
        tabIndex={tabIndex}
        {...rest}
      />
      <Box
        className={classnames(
          bem(cn, { e: "Box" }),
          bem(cn, { e: "Box", m: theme }),
          bem(cn, { e: "Box", m: color }),
          checked && bem(cn, { e: "Box", m: "checked" }),
        )}
      />
      <Icon
        className={classnames(
          bem(cn, { e: "Check" }),
          bem(cn, { e: "Check", m: theme }),
          checked && bem(cn, { e: "Check", m: "checked" }),
        )}
        icon={
          checkedState === CheckboxState.INDETERMINATE
            ? ICON_TYPE.MINUS
            : ICON_TYPE.CHECK
        }
      />
    </Box>
  );

  const checkboxWithLabel =
    label || children ? (
      <Label
        className={bem(cn, { e: "Label" })}
        isRequired={calculatedRequired && !hideRequiredStyles}
      >
        {bareCheckbox}
        <Text
          as="span"
          className={classnames(
            bem(cn, { e: "LabelText" }),
            bem(cn, { e: "LabelText", m: theme }),
          )}
        >
          {label}
          {children}
        </Text>
      </Label>
    ) : (
      bareCheckbox
    );

  return (
    <Box
      className={classes}
      onClick={label ? undefined : handleClick}
      {...rest}
    >
      {checkboxWithLabel}
    </Box>
  );
};

Checkbox.Group = CheckboxGroup;