import { useNoteStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";
import { EraserFill, Search } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownItem from "react-bootstrap/DropdownItem";
import DropdownMenu from "react-bootstrap/DropdownMenu";
import DropdownToggle from "react-bootstrap/DropdownToggle";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import { useIntParam } from "taehui-lib/fe-utilities";

export default observer(() => {
  const { wantInput, setWantInput } = useNoteStore();

  const { push } = useRouter();
  const searchParams = useSearchParams();

  const onWant = () => {
    push(`/note/${wantInput}?${new URLSearchParams(searchParams)}`);
  };

  const { param: fit, setParam: setFit } = useIntParam("fit", 0);
  const { param: src, setParam: setSrc } = useIntParam("src", 0);

  const t = useTranslations();

  return (
    <InputGroup>
      <Dropdown
        onSelect={(eventKey) => {
          if (eventKey) {
            setFit(Number.parseInt(eventKey));
          }
        }}
      >
        <DropdownToggle>{t(`fit${fit}`)}</DropdownToggle>
        <DropdownMenu>
          <DropdownItem eventKey="0">{t("fit0")}</DropdownItem>
          <DropdownItem eventKey="1">{t("fit1")}</DropdownItem>
          <DropdownItem eventKey="2">{t("fit2")}</DropdownItem>
          <DropdownItem eventKey="3">{t("fit3")}</DropdownItem>
          <DropdownItem eventKey="4">{t("fit4")}</DropdownItem>
          <DropdownItem eventKey="5">{t("fit5")}</DropdownItem>
          <DropdownItem eventKey="6">{t("fit6")}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Dropdown
        onSelect={(eventKey) => {
          if (eventKey) {
            setSrc(Number.parseInt(eventKey));
          }
        }}
      >
        <DropdownToggle>{t(`src${src}`)}</DropdownToggle>
        <DropdownMenu>
          <DropdownItem eventKey="0">{t("src0")}</DropdownItem>
          <DropdownItem eventKey="1">{t("src1")}</DropdownItem>
          <DropdownItem eventKey="2">{t("src2")}</DropdownItem>
          <DropdownItem eventKey="3">{t("src3")}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <FormControl
        type="search"
        value={wantInput}
        onChange={({ target: { value } }) => {
          setWantInput(value);
        }}
        onKeyDown={({ key }) => {
          if (key === "Enter") {
            onWant();
          }
        }}
      />
      <Button variant="success" onClick={onWant}>
        <Search />
      </Button>
      <Button
        variant="danger"
        onClick={() => {
          push("/note");
        }}
      >
        <EraserFill />
      </Button>
    </InputGroup>
  );
});