import { Button, Result, Spin, notification } from "antd";
import { Link, useParams, useNavigate } from "react-router-dom";
import { Constants, myFetch } from "../../../../utils";
import { useEffect, useState } from "react";
import MyCenteredContainer from "../../../../Components/MyContainer";
import { useTranslation } from "react-i18next";

export default function StoreCalendarAuth() {
  const { t } = useTranslation();
  const [notificationApi, notificationContextHolder] =
    notification.useNotification();

  const { status } = useParams();

  const [isRequesting, setIsRequesting] = useState(true);
  const [storeId, setStoreId] = useState("");

  useEffect(() => {
    myFetch({
      url: "/calendar/store",
      method: "GET",
      notificationApi: notificationApi,
      t: t,
    })
      .then((res) => {
        setIsRequesting(false);
        setStoreId(res.storeId);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [status]);

  if (isRequesting) {
    return (
      <MyCenteredContainer>
        <Spin size="large" />
      </MyCenteredContainer>
    );
  }

  return (
    <>
      {notificationContextHolder}

      <Result
        status={status === "finish" ? "success" : "error"}
        title={
          status === "finish"
            ? t("calendar.authFinish.title")
            : t("calendar.authFailed.title")
        }
        subTitle={
          status === "finish"
            ? t("calendar.authFinish.description")
            : t("calendar.authFailed.description")
        }
        extra={[
          <div key="1">
            <Link to={`${Constants.ROUTE_PATHS.STORE.CALENDAR}/${storeId}`}>
              <Button>
                {status === "finish"
                  ? t("calendar.authFinish.button")
                  : t("calendar.authFailed.button")}
              </Button>
            </Link>

            {status === "finish" && <CountdownRedirect storeId={storeId} />}
          </div>,
        ]}
      />
    </>
  );
}

function CountdownRedirect({ storeId }) {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const [count, setCount] = useState(5);

  useEffect(() => {
    if (count > 0) {
      const timer = setTimeout(() => {
        setCount(count - 1);
      }, 1000);
      return () => clearTimeout(timer);
    } else {
      navigate(`${Constants.ROUTE_PATHS.STORE.CALENDAR}/${storeId}`);
    }
  }, [count, navigate]);

  return (
    <>
      <p style={{ paddingTop: 10, color: "#8c8c8c" }}>
        {t("calendar.authFinish.countDownRedirect", { countDown: count })}
      </p>
    </>
  );
}