import { useEffect } from "react";
import { observer } from "mobx-react-lite";
import { useTranslation } from "react-i18next";
import { Input, Button, Row, Col } from "reactstrap";
import { sprintf } from "sprintf-js";
import { usePage } from "taehui-ts/fe-utility";

import { useNoteStore } from "src/Stores";
import NoteItems from "src/note/NoteItems";
import FitInput from "src/note/FitInput";
import SrcInput from "src/note/SrcInput";
import PositionInput from "src/note/PositionInput";
import { formatText } from "src/Utility";
import NoteVarietyInput from "src/NoteVarietyInput";

export default observer(() => {
  const {
    totalCount,
    highestCount,
    noteVariety,
    setNoteVariety,
    setInput,
    setWant,
    lastPage,
    isLoading,
    getNote,
    fit,
    src,
    input,
    want,
    pageUnit,
    viewUnit,
  } = useNoteStore();

  const { t } = useTranslation();

  const { page, setPage } = usePage();

  useEffect(() => {
    getNote(page, setPage);
  }, [getNote, noteVariety, fit, src, want, pageUnit, page, viewUnit, setPage]);

  const onWant = () => {
    setWant(input);
  };

  return (
    <>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <NoteVarietyInput
            noteVariety={noteVariety}
            setNoteVariety={setNoteVariety}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <FitInput />
        </Col>
        <Col className="m-1" xs="auto">
          <SrcInput />
        </Col>
        <Col className="m-1">
          <Input
            type="search"
            value={input}
            onChange={({ target: { value } }) => {
              setInput(value);
            }}
            onKeyDown={({ key }) => {
              if (key === "Enter") {
                onWant();
              }
            }}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Button color="success" onClick={onWant}>
            {t("onWant")}
          </Button>
        </Col>
        <Col className="m-1" xs="auto">
          <Button
            color="danger"
            onClick={() => {
              setInput("");
              setWant("");
            }}
          >
            {t("onClose")}
          </Button>
        </Col>
      </Row>

      <Row className="g-0">
        <Col className="m-1">
          <NoteItems />
        </Col>
      </Row>

      {lastPage >= 0 && (
        <Row className="justify-content-center g-0">
          <Col className="m-1" xs="auto">
            <PositionInput />
          </Col>
        </Row>
      )}

      {!isLoading && (
        <Row className="g-0">
          <Col className="m-1" xs="auto">
            <span>
              {sprintf(t("highestCountText"), formatText(highestCount))}
            </span>
            <br />
            <span>{sprintf(t("totalCountText"), formatText(totalCount))}</span>
          </Col>
        </Row>
      )}

      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <span
            dangerouslySetInnerHTML={{
              __html: sprintf(
                t("bannedNoteFile"),
                '<a href="mailto://taehui@taehui.ddns.net">taehui@taehui.ddns.net</a>',
              ),
            }}
          />
        </Col>
      </Row>
    </>
  );
});