import { useState } from "react";
import { observer } from "mobx-react-lite";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";
import { TFunction } from "i18next";
import { useTranslation } from "react-i18next";
import { useNoteStore } from "src/Stores";

const toFit = (fit: number, t: TFunction) => {
  switch (fit) {
    case 0:
      return t("toFit0");
    case 1:
      return t("toFit1");
    case 2:
      return t("toFit2");
    case 3:
      return t("toFit3");
    case 4:
      return t("toFit4");
    case 5:
      return t("toFit5");
    case 6:
      return t("toFit6");
    default:
      return "";
  }
};

export default observer(() => {
  const { fit, setFit } = useNoteStore();
  const [isFitOpened, setFitOpened] = useState(false);
  const { t } = useTranslation();

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

  return (
    <Dropdown
      isOpen={isFitOpened}
      toggle={() => {
        setFitOpened(!isFitOpened);
      }}
    >
      <DropdownToggle caret>{toFit(fit, t)}</DropdownToggle>
      <DropdownMenu>
        <DropdownItem onClick={onInput(0)}>{toFit(0, t)}</DropdownItem>
        <DropdownItem onClick={onInput(1)}>{toFit(1, t)}</DropdownItem>
        <DropdownItem onClick={onInput(2)}>{toFit(2, t)}</DropdownItem>
        <DropdownItem onClick={onInput(3)}>{toFit(3, t)}</DropdownItem>
        <DropdownItem onClick={onInput(4)}>{toFit(4, t)}</DropdownItem>
        <DropdownItem onClick={onInput(5)}>{toFit(5, t)}</DropdownItem>
        <DropdownItem onClick={onInput(6)}>{toFit(6, t)}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
});