import { useEffect } from "react";
import { observer } from "mobx-react-lite";
import { useTranslation } from "react-i18next";
import { Button, Col, Input, Row } from "reactstrap";
import { sprintf } from "sprintf-js";
import { useWant, useIntParam } 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 useGetNote from "src/note/useGetNote";

export default observer(() => {
  const {
    lastWant,
    setLastWant,
    lastSrc,
    setLastSrc,
    input,
    setInput,
    lastPage,
    setLastPage,
    viewUnit,
    setWantAvatar,
  } = useNoteStore();

  const { want, setWant } = useWant("/qwilight/note");

  const { param: page, setParam: setPage } = useIntParam("page", 1);
  const { param: src } = useIntParam("src", 0);

  const { t } = useTranslation();

  useEffect(() => {
    if ((want !== lastWant || src !== lastSrc) && page > 1) {
      setPage(1);
    }
  }, [lastSrc, lastWant, page, setPage, src, want]);

  useEffect(() => {
    setLastWant(want);
  }, [setLastWant, want]);

  useEffect(() => {
    setLastSrc(src);
  }, [setLastSrc, src]);

  useEffect(() => {
    setWantAvatar(src === 1 ? want : "");
  }, [setWantAvatar, src, want]);

  const {
    data: { highestCount, totalCount, noteCount },
    isFetched: isNoteLoaded,
  } = useGetNote();

  useEffect(() => {
    if (isNoteLoaded) {
      setLastPage(Math.max(1, Math.ceil(noteCount / viewUnit)));
    }
  }, [isNoteLoaded, noteCount, setLastPage, viewUnit]);

  useEffect(() => {
    setInput(want);
  }, [setInput, want]);

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

  const onClose = () => {
    setWant("");
  };

  return (
    <>
      <Row className="g-0">
        <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={onClose}>
            {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>
      )}

      {isNoteLoaded && (
        <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>
    </>
  );
});
