import usePutAvatar from "@/query/usePutAvatar";
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useMemo, useState } from "react";
import { PencilFill } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import InputGroupText from "react-bootstrap/InputGroupText";
import Stack from "react-bootstrap/Stack";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";

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 isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]);

  const { mutateAsync: putAvatar } = usePutAvatar();

  return (
    <Stack gap={2}>
      <InputGroup>
        <InputGroupText>{t("avatarID")}</InputGroupText>
        <FormControl type="text" value={taehuiAvatarID} readOnly />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("avatarCipher")}</InputGroupText>
        <FormControl
          type="password"
          placeholder={t("avatarCipher")}
          value={avatarCipher}
          onChange={({ target: { value } }) => {
            setAvatarCipher(value);
          }}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("avatarCipherModified")}</InputGroupText>
        <FormControl
          type="password"
          placeholder={t("avatarCipherModified")}
          value={avatarCipherModified}
          onChange={({ target: { value } }) => {
            setAvatarCipherModified(value);
          }}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("avatarName")}</InputGroupText>
        <FormControl
          type="text"
          maxLength={16}
          isValid={avatarName.length > 0}
          isInvalid={avatarName.length === 0}
          placeholder={t("avatarName")}
          value={avatarName}
          onChange={({ target: { value } }) => {
            setAvatarName(value);
          }}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("fax")}</InputGroupText>
        <FormControl
          type="email"
          isValid={fax.length > 0 && isValidFax}
          isInvalid={fax.length > 0 && !isValidFax}
          placeholder={t("fax")}
          value={fax}
          onChange={({ target: { value } }) => {
            setFax(value);
          }}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("avatarIntro")}</InputGroupText>
        <FormControl
          as={ReactTextareaAutosize}
          placeholder={t("avatarIntro")}
          value={avatarIntro}
          onChange={({ target: { value } }) => {
            setAvatarIntro(value);
          }}
        />
      </InputGroup>
      <Button
        variant="warning"
        onClick={async () => {
          if (avatarCipher && avatarName && (!fax || isValidFax)) {
            await putAvatar({
              avatarCipher,
              avatarCipherModified,
              avatarName,
              fax,
              avatarIntro,
            });
          } else {
            toast.error(t("failedValidation"));
          }
        }}
      >
        <PencilFill />
      </Button>
    </Stack>
  );
});