import { LoginOutlined } from "@ant-design/icons";
import { Button, Form, Modal, Tabs, notification } from "antd";
import {
  EncodeStringToBase64,
  myFetch,
  myFetchContentType,
  setUserSessionToLocalStorage,
} from "../../utils";
import { useState } from "react";
import {
  MyAccountNameFormInput,
  MyPasswordFormInput,
  MyUsernameFormInput,
} from "../../Components/MyFormInputs";
import { useTranslation } from "react-i18next";

export default function Login() {
  const { t } = useTranslation();
  const [form] = Form.useForm();

  const [api, contextHolder] = notification.useNotification();

  const [selectedMethod, setSelectedMethod] = useState("1");
  const [isRequesting, setIsRequesting] = useState(false);

  const showErrorNotification = (errStatus) => {
    if (errStatus === 401) {
      api["error"]({
        message: "Account deactivated",
        description: "Please contact an administrator",
      });
      return;
    }

    api["error"]({
      message: "Login failed",
      description: "Please check your accountName and password!",
    });
  };

  return (
    <>
      {contextHolder}
      <Modal
        open={true}
        closable={false}
        centered
        keyboard={false}
        footer={
          <Button
            type="primary"
            htmlType="submit"
            icon={<LoginOutlined />}
            loading={isRequesting}
            onClick={() => {
              form
                .validateFields()
                .then((values) => {
                  setIsRequesting(true);

                  let body = {
                    accountName: values.accountName.toLocaleLowerCase(),
                    password: EncodeStringToBase64(values.password),
                  };

                  if (selectedMethod === "2") {
                    body.username = values.username;
                  }

                  myFetch(
                    `/user/auth/${selectedMethod === "1" ? "login" : "signup"}`,
                    "POST",
                    body,
                    {},
                    myFetchContentType.JSON,
                    "",
                    true
                  )
                    .then((data) => {
                      console.log(data.XAuthorization);

                      setUserSessionToLocalStorage(data.XAuthorization);
                      window.location.href = "/";
                    })
                    .catch((errStatus) => {
                      showErrorNotification(errStatus);
                      setIsRequesting(false);
                    });
                })
                .catch((info) => {
                  console.log("Validate Failed:", info);
                });
            }}
          >
            {selectedMethod === "1" ? t("login.login") : t("login.signUp")}
          </Button>
        }
      >
        <Tabs
          defaultActiveKey="1"
          items={[
            {
              key: "1",
              label: t("login.login"),
            },
            {
              key: "2",
              label: t("login.signUp"),
            },
          ]}
          centered
          onChange={(activeKey) => {
            setSelectedMethod(activeKey);
          }}
        />

        <Form form={form} layout="vertical" requiredMark={false}>
          {selectedMethod === "2" && <MyUsernameFormInput />}

          <MyAccountNameFormInput
            disableAccountNameCheck={selectedMethod === "1"}
            hasFeedback={selectedMethod === "2"}
          />

          <MyPasswordFormInput />
        </Form>
      </Modal>
    </>
  );
}