import usePostDrawing from "@/query/usePostDrawing";
import usePutAvatar from "@/query/usePutAvatar";
import { useTaehuiStore } from "@/state/Stores";
import { wwwAPIPath } from "@/utilities/wwwAPI";
import dayjs from "dayjs";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useMemo, useState } from "react";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import { Button, Col, Form, Input, Row } from "reactstrap";
import { useTo } from "taehui-ts/fe-utilities";

export default observer(() => {
  const { taehuiAvatarID, taehuiAvatarName, taehuiFax, taehuiAvatarIntro } =
    useTaehuiStore();
  const t = useTranslations();

  const [avatarCipher, setAvatarCipher] = useState("");
  const [avatarCipherModified, setAvatarCipherModified] = useState("");
  const [avatarName, setAvatarName] = useState(taehuiAvatarName);
  const [fax, setFax] = useState(taehuiFax);
  const [avatarIntro, setAvatarIntro] = useState(taehuiAvatarIntro);

  const to = useTo();

  const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]);

  const { mutateAsync: putAvatar } = usePutAvatar();
  const { mutateAsync: postDrawing } = usePostDrawing();

  return (
    <Form>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Image
            className="avatar route"
            alt=""
            src={`${wwwAPIPath}/avatar/drawing/${taehuiAvatarID}?${dayjs().valueOf()}`}
            width={48}
            height={48}
            onClick={() => {
              const inputElement = document.createElement("input");
              inputElement.type = "file";
              inputElement.accept = "image/png";
              inputElement.addEventListener("change", async ({ target }) => {
                const file = (target as HTMLInputElement).files?.[0];
                if (file) {
                  await postDrawing({ file });
                }
              });
              inputElement.click();
            }}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Input value={taehuiAvatarID} disabled />
            </Col>
          </Row>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Input
                valid={!!avatarCipher}
                invalid={!avatarCipher}
                type="password"
                placeholder={t("avatarCipher")}
                value={avatarCipher}
                onChange={({ target: { value } }) => {
                  setAvatarCipher(value);
                }}
              />
            </Col>
          </Row>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Input
                type="password"
                placeholder={t("avatarCipherModified")}
                value={avatarCipherModified}
                onChange={({ target: { value } }) => {
                  setAvatarCipherModified(value);
                }}
              />
            </Col>
          </Row>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Input
                maxLength={16}
                valid={!!avatarName}
                invalid={!avatarName}
                placeholder={t("avatarName")}
                value={avatarName}
                onChange={({ target: { value } }) => {
                  setAvatarName(value);
                }}
              />
            </Col>
          </Row>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Input
                valid={fax.length > 0 && isValidFax}
                invalid={fax.length > 0 && !isValidFax}
                type="email"
                placeholder={t("fax")}
                value={fax}
                onChange={({ target: { value } }) => {
                  setFax(value);
                }}
              />
            </Col>
          </Row>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <ReactTextareaAutosize
                className="form-control"
                placeholder={t("avatarIntro")}
                value={avatarIntro}
                onChange={({ target: { value } }) => {
                  setAvatarIntro(value);
                }}
              />
            </Col>
          </Row>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Button
                color="success"
                onClick={async () => {
                  if (avatarCipher && avatarName && (!fax || isValidFax)) {
                    await putAvatar({
                      avatarCipher,
                      avatarCipherModified,
                      avatarName,
                      fax,
                      avatarIntro,
                    });
                  } else {
                    toast.error(t("failedValidation"));
                  }
                }}
              >
                {t("doModifyAvatar")}
              </Button>
            </Col>
            <Col className="m-1" xs="auto">
              <Button
                color="danger"
                onClick={() => {
                  to("/");
                }}
              >
                {t("quit")}
              </Button>
            </Col>
          </Row>
        </Col>
      </Row>
    </Form>
  );
});