import usePostAvatar from "@/query/usePostAvatar";
import { useTranslations } from "next-intl";
import { useMemo, useState } from "react";
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 { toast } from "react-toastify";

export default function EnrollView() {
  const t = useTranslations();

  const [avatarID, setAvatarID] = useState("");
  const [avatarCipher, setAvatarCipher] = useState("");
  const [avatarCipherTest, setAvatarCipherTest] = useState("");
  const [avatarName, setAvatarName] = useState("");
  const [fax, setFax] = useState("");

  const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]);
  const isValidAvatarID = useMemo(
    () => /[a-zA-Z\d]/.test(avatarID),
    [avatarID],
  );

  const { mutateAsync: postAvatar } = usePostAvatar();

  return (
    <Stack gap={2}>
      <InputGroup>
        <InputGroupText>{t("avatarID")}</InputGroupText>
        <FormControl
          type="text"
          isValid={isValidAvatarID}
          isInvalid={!isValidAvatarID}
          placeholder={t("avatarID")}
          value={avatarID}
          onChange={({ target: { value } }) => {
            setAvatarID(value);
          }}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("avatarCipher")}</InputGroupText>
        <FormControl
          type="password"
          isValid={!!avatarCipher}
          isInvalid={!avatarCipher}
          placeholder={t("avatarCipher")}
          value={avatarCipher}
          onChange={({ target: { value } }) => {
            setAvatarCipher(value);
          }}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("avatarCipherTest")}</InputGroupText>
        <FormControl
          type="password"
          isValid={avatarCipher === avatarCipherTest}
          isInvalid={avatarCipher !== avatarCipherTest}
          placeholder={t("avatarCipherTest")}
          value={avatarCipherTest}
          onChange={({ target: { value } }) => {
            setAvatarCipherTest(value);
          }}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("avatarName")}</InputGroupText>
        <FormControl
          type="text"
          isValid={avatarName.length > 0 && avatarName.length <= 16}
          isInvalid={avatarName.length > 16}
          maxLength={16}
          placeholder={t("avatarName")}
          value={avatarName}
          onChange={({ target: { value } }) => {
            setAvatarName(value);
          }}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("fax")}</InputGroupText>
        <FormControl
          type="email"
          isValid={!!fax && isValidFax}
          isInvalid={!!fax && !isValidFax}
          placeholder={t("fax")}
          value={fax}
          onChange={({ target: { value } }) => {
            setFax(value);
          }}
        />
      </InputGroup>
      <Button
        variant="success"
        onClick={async () => {
          if (
            isValidAvatarID &&
            avatarCipher &&
            avatarCipher === avatarCipherTest &&
            avatarName &&
            (!fax || isValidFax)
          ) {
            await postAvatar({
              avatarID,
              avatarCipher,
              avatarName,
              fax,
            });
          } else {
            toast.error(t("failedValidation"));
          }
        }}
      >
        {t("enroll")}
      </Button>
    </Stack>
  );
}