import * as React from "react";
import { useState } from "react";
import Switch from "@material-ui/core/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import RemoveIcon from "@material-ui/icons/Remove";
import AddIcon from "@material-ui/icons/Add";

import { isNumber } from "@sc/plugins/utilities";
import { ButtonSliderGroup } from "../../groups";
import { PaddingProps } from "./types";

/**
 * Creates a Button Slider Group to Change the Components Padding
 */
const Padding: React.FC<PaddingProps> = ({
  isMax,
  isAuto,
  maxValue,
  minValue,
  showMaxCheck,
  showAutoCheck,
  autoCheckValue,
  style,
  onChange,
  label = "Padding",
  __testSliderValue = 111,
}) => {
  const value: any = style.padding;
  const [padding, setPadding] = useState<number>(value);
  const [initialValue, setInitialValue] = useState<number>(value);
  const [maxIsChecked, setMaxIsChecked] = useState<boolean>(isMax);
  const [autoIsChecked, setAutoIsChecked] = useState<boolean>(isAuto);

  const handleChange = (
    command: string,
    newValue: number | React.ReactText,
    skipUncheck: boolean = false
  ) => {
    // console.log(command);
    let value = newValue;

    // max & min enforcement
    if (newValue > maxValue && isNumber(newValue)) value = maxValue;
    if (newValue < minValue && isNumber(newValue)) value = minValue;

    // button commands
    switch (command) {
      case "GROW":
        value = padding + 10;
        break;

      case "SHRINK":
        value = padding - 10;
        break;
    }

    setPadding(value as number);

    // Should immediately uncheck the AutoCheck and MaxCheck checkbox when the button is clicked or slider is changed
    if (!skipUncheck) {
      setMaxIsChecked(false);
      setAutoIsChecked(false);
    }

    if (newValue === maxValue) setMaxIsChecked(true);

    onChange({ padding: value });
  };

  const handleMaxCheck = (
    event: React.ChangeEvent<HTMLInputElement>,
    checked: boolean
  ) => {
    // Should set the value to the maxCheckValue prop's value when the [Max] checkbox is checked
    setMaxIsChecked(checked);
    if (checked) {
      setInitialValue(padding);
      handleChange(null, maxValue, true);
    } else {
      handleChange(null, initialValue);
    }
  };

  const handleAutoCheck = (
    event: React.ChangeEvent<HTMLInputElement>,
    checked: boolean
  ) => {
    // Should set the value to the autoCheckValue prop's value when the [Auto] checkbox is checked
    setAutoIsChecked(checked);
    if (checked) {
      setInitialValue(padding);
      handleChange(null, autoCheckValue, true);
    } else {
      handleChange(null, initialValue);
    }
  };

  return (
    <div data-testid="Properties-Padding">
      <ButtonSliderGroup
        value={padding}
        maxValue={maxValue}
        minValue={minValue}
        onValueChange={handleChange}
        showSlider
        label={label}
        button1={{
          command: "SHRINK",
          icon: <RemoveIcon />,
        }}
        button2={{
          command: "GROW",
          icon: <AddIcon />,
        }}
        __testSliderValue={__testSliderValue}
      >
        {showMaxCheck && (
          <FormControlLabel
            control={
              <Switch
                name="MaxCheck"
                onChange={handleMaxCheck}
                data-testid="ButtonSliderGroup-maxCheck"
                checked={Boolean(maxIsChecked)}
              />
            }
            label="Max"
          />
        )}

        {showAutoCheck && (
          <FormControlLabel
            control={
              <Switch
                name="AutoSize"
                onChange={handleAutoCheck}
                data-testid="ButtonSliderGroup-autoCheck"
                checked={Boolean(autoIsChecked)}
              />
            }
            label="Auto Size"
          />
        )}
      </ButtonSliderGroup>
    </div>
  );
};

export default Padding;