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

import { useAvatarStore } from "src/Stores";

const SignUpView = observer(() => {
  const { postAvatar, totem } = useAvatarStore();
  const { t } = useTranslation();

  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(
    () =>
      avatarID &&
      !avatarID.startsWith("@") &&
      !avatarID.startsWith("#") &&
      !avatarID.startsWith("$") &&
      !avatarID.startsWith("*"),
    [avatarID],
  );

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

  return (
    <>
      <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
            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
            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(t, 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>
    </>
  );
});

export default SignUpView;