import { memo, useCallback, useState } from "react";
import { Box, Card, Input, InputPassword, Button } from "components/Common";
import { Typography } from "antd";
import { Shield, User, Key } from "react-feather";
import { useTranslation } from "react-i18next";
import axios from "axios";
import { toast } from "react-hot-toast";

const RegisterVisitor = memo(() => {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState<string>();
  const [password, setPassword] = useState<string>();

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

      localStorage.setItem("adminToken", data.token);
      localStorage.setItem("role", "admin");
      localStorage.setItem("userId", data.admin_id);

      window.location.pathname = "/admin/dashboard";
    } catch (error: any) {
      toast.error("Sign in failed! Please check your email or password.");
    }

    setLoading(false);
  }, [email, password]);

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

  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"
      >
        <Shield color="var(--primary)" size="60px" />
        <Typography.Title level={3}>
          {t("AUTH.HEADER")}{" "}
          <b style={{ color: "var(--secondary)" }}>{t("ADMIN")}</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="10px 0"
          margin_bottom="40px"
        >
          {t("AUTH.SIGN_IN")}
        </Button>
      </Card>
    </Box>
  );
});

export default RegisterVisitor;