import { memo, useCallback, useState } from "react";
import {
  Box,
  Card,
  Input,
  InputPassword,
  Button,
  Label,
} from "components/Common";
import { Typography, Modal } from "antd";
import { Eye, User, Key } from "react-feather";
import usePath from "hooks/usePath";
import { useTranslation } from "react-i18next";
import axios from "axios";
import { toast } from "react-hot-toast";
// import { useUserContext } from "contexts/UserContext";
import { useQueryString } from "utils/useQueryString";

const RegisterVisitor = memo(() => {
  const { t } = useTranslation();
  const to = useQueryString("to");
  // const { role } = useUserContext();
  const { goToPath } = usePath();
  const [loading, setLoading] = useState(false);
  const [loadingReset, setLoadingReset] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [email, setEmail] = useState<string>();
  const [password, setPassword] = useState<string>();

  const handleSignin = useCallback(async () => {
    setLoading(true);
    try {
      const { data } = await axios.post("/visitors/login", {
        username: email,
        password: password,
      });

      localStorage.setItem("userToken", data.token);
      localStorage.setItem("role", "visitor");
      localStorage.setItem("userId", data.visitor_id);

      window.location.pathname = to ? "/user" + to : "/user/search";
    } catch (error: any) {
      toast.error("Sign in failed! Please check your email or password.");
      setLoading(false);
    }
  }, [email, password, to]);

  const handleKeyUp = (event: any) => {
    // Enter
    if (event.keyCode === 13) {
      handleSignin();
    }
  };

  const resetPassword = useCallback(async () => {
    setLoadingReset(true);
    try {
      await axios.post("/visitors/passwordreset", {
        email: email,
      });

      setIsModalOpen(false);
      toast.success("Sent");
    } catch (error: any) {
      toast.error("Sent failed! Please check your email.");
    }
    setLoadingReset(false);
  }, [email]);

  // if (role === "visitor") {
  //   goToPath({ pathname: "/search" });
  // } else if (role === "exhibitor") {
  //   goToPath({ pathname: "/dashboard" });
  // } else if (role === "admin") {
  //   goToPath({ pathname: "/admin" });
  // }

  return (
    <>
      <Box padding="20px" padding_bottom="40px" align="center">
        <Card
          onKeyUp={handleKeyUp}
          style={{ maxWidth: "500px", maxHeight: "500px" }}
          margin="0 auto"
          padding="20px"
          direction="column"
          justify="center"
          align="center"
        >
          <Eye color="var(--primary)" size="60px" />
          <Typography.Title level={3}>
            {t("AUTH.HEADER")}{" "}
            <b style={{ color: "var(--secondary)" }}>{t("VISITOR")}</b>
          </Typography.Title>
          <Input
            value={email}
            onChange={({ target }) => {
              setEmail(target.value);
            }}
            size="large"
            prefix={<User color="var(--primary)" size="18px" />}
            placeholder={t("AUTH.EMAIL")}
            style={{ maxWidth: "300px" }}
            margin="10px 0"
          />
          <InputPassword
            value={password}
            onChange={({ target }) => {
              setPassword(target.value);
            }}
            size="large"
            prefix={<Key color="var(--primary)" size="18px" />}
            placeholder={t("AUTH.PASSWORD")}
            style={{ maxWidth: "300px" }}
            margin="10px 0"
          />
          <Button
            onClick={handleSignin}
            disabled={!email || !password}
            loading={loading}
            type="primary"
            margin_top="10px"
          >
            {t("AUTH.SIGN_IN")}
          </Button>
          <Button
            onClick={() => {
              setIsModalOpen(true);
            }}
            type="link"
            margin="10px 0"
            margin_bottom="40px"
          >
            {t("AUTH.FORGOT_PASSWORD")}
          </Button>

          <Typography.Text style={{ color: "var(--gray-300)" }}>
            {t("AUTH.NO_ACCOUNT")}{" "}
            <Button
              onClick={() => goToPath({ pathname: "/register/visitor" })}
              size="small"
              type="link"
            >
              {t("AUTH.REGISTER")}
            </Button>
          </Typography.Text>
        </Card>
      </Box>

      <Modal
        visible={isModalOpen}
        onCancel={() => {
          setIsModalOpen(false);
        }}
        title={t("AUTH.RESET_PASSWORD")}
        footer={false}
      >
        <Label>{t("AUTH.RESET_PASSWORD_DES")}</Label>
        <Input
          value={email}
          onChange={({ target }) => setEmail(target.value)}
        />
        <Button
          onClick={resetPassword}
          loading={loadingReset}
          disabled={!email}
          block
          margin_top="24px"
          type="primary"
        >
          {t("AUTH.SEND")}
        </Button>
      </Modal>
    </>
  );
});

export default RegisterVisitor;