import { observer } from "mobx-react-lite";
import { useLayoutEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import { Button, Col, Input, Row } from "reactstrap";
import { useTo } from "taehui-ts/fe-utility";

import { useAvatarStore } from "src/Stores";
import usePutAvatar from "src/avatar/usePutAvatar";
import usePostDrawing from "src/avatar/usePostDrawing";

export default observer(() => {
  const {
    taehuiAvatarID,
    taehuiAvatarName,
    taehuiFax,
    taehuiAvatarIntro,
    totem,
  } = useAvatarStore();
  const { t } = useTranslation();

  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]);

  useLayoutEffect(() => {
    if (!totem) {
      to("/avatar/w");
    }
  }, [to, totem]);

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

  return (
    <Row className="justify-content-center g-0">
      <Col className="m-1" xs="auto">
        <img
          alt=""
          src={`/www/avatar/drawing/${taehuiAvatarID}`}
          className="avatar route"
          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>
  );
});