import { useState } from "react";
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
} from "reactstrap";
import { useTranslation } from "react-i18next";
import { useIntParam } from "taehui-ts/fe-utility";

export default function FitInput() {
  const [isFitOpened, setFitOpened] = useState(false);
  const { t } = useTranslation();
  const { param: fit, setParam: setFit } = useIntParam("fit", 0);

  const onInput = (fit: number) => () => {
    setFit(fit);
  };

  return (
    <Dropdown
      isOpen={isFitOpened}
      toggle={() => {
        setFitOpened((prevState) => !prevState);
      }}
    >
      <DropdownToggle caret>{t(`toFit${fit}`)}</DropdownToggle>
      <DropdownMenu>
        <DropdownItem onClick={onInput(0)}>{t("toFit0")}</DropdownItem>
        <DropdownItem onClick={onInput(1)}>{t("toFit1")}</DropdownItem>
        <DropdownItem onClick={onInput(2)}>{t("toFit2")}</DropdownItem>
        <DropdownItem onClick={onInput(3)}>{t("toFit3")}</DropdownItem>
        <DropdownItem onClick={onInput(4)}>{t("toFit4")}</DropdownItem>
        <DropdownItem onClick={onInput(5)}>{t("toFit5")}</DropdownItem>
        <DropdownItem onClick={onInput(6)}>{t("toFit6")}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}