import usePostAvatar from "@/query/usePostAvatar";
import { useTranslations } from "next-intl";
import { useMemo, useState } from "react";
import { toast } from "react-toastify";
import { Button, Col, Form, Input, Row } from "reactstrap";
import { useTo } from "taehui-ts/fe-utilities";

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

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

  const to = useTo();

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

  const { mutateAsync: postAvatar } = usePostAvatar();

  return (
    <Form>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Input
            valid={isValidAvatarID}
            invalid={!isValidAvatarID}
            placeholder={t("avatarID")}
            value={avatarID}
            onChange={({ target: { value } }) => {
              setAvatarID(value);
            }}
          />
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Input
            autoComplete="new-password"
            valid={!!avatarCipher}
            invalid={!avatarCipher}
            type="password"
            placeholder={t("avatarCipher")}
            value={avatarCipher}
            onChange={({ target: { value } }) => {
              setAvatarCipher(value);
            }}
          />
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Input
            autoComplete="new-password"
            valid={avatarCipher === avatarCipherTest}
            invalid={avatarCipher !== avatarCipherTest}
            type="password"
            placeholder={t("avatarCipherTest")}
            value={avatarCipherTest}
            onChange={({ target: { value } }) => {
              setAvatarCipherTest(value);
            }}
          />
        </Col>
      </Row>
      <Row className="justify-content-center 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="justify-content-center 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="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Button
            color="success"
            onClick={async () => {
              if (
                isValidAvatarID &&
                avatarCipher &&
                avatarCipher === avatarCipherTest &&
                avatarName &&
                (!fax || isValidFax)
              ) {
                await postAvatar({
                  avatarID,
                  avatarCipher,
                  avatarName,
                  fax,
                });
              } else {
                toast.error(t("failedValidation"));
              }
            }}
          >
            {t("signUp")}
          </Button>
        </Col>
        <Col className="m-1" xs="auto">
          <Button
            color="danger"
            onClick={() => {
              to("/");
            }}
          >
            {t("quit")}
          </Button>
        </Col>
      </Row>
    </Form>
  );
}