import { lazy, useEffect, useState } from "react";
import { isDevelopmentEnv, myFetch } from "../../../utils";
import { useParams } from "react-router-dom";
import MyCenteredContainer from "../../../Components/MyContainer";
import { Button, Card, Result, Spin, Tabs, notification } from "antd";
import { useTranslation } from "react-i18next";
import { MySupsenseFallback } from "../../../Components/MySupsenseFallback";
import PageInDevelopment from "../../PageInDevelopment";

const General = lazy(() => import("./General"));
const Banner = lazy(() => import("./Banner"));
const ColorPalette = lazy(() => import("./ColorPalette"));

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

  const [isRequesting, setIsRequesting] = useState(true);
  const [website, setWebsite] = useState({});

  const [activeTab, setActiveTab] = useState(0);

  const tabItems = [
    {
      label: t("storeWebsite.tabs.general"),
      children: <General />,
    },
    {
      label: t("storeWebsite.tabs.banner"),
      children: <Banner />,
    },
    {
      label: t("storeWebsite.tabs.colorPalette"),
      children: <ColorPalette />,
    },
  ].map((item, index) => {
    return {
      key: index,
      ...item,
      children: (
        <MySupsenseFallback spinnerCentered={false}>
          {item.children}
        </MySupsenseFallback>
      ),
    };
  });

  useEffect(() => {
    myFetch({
      url: `/website/${storeId}`,
      method: "GET",
      notificationApi: notificationApi,
      t: t,
    })
      .then(() => setIsRequesting(false))
      .catch((err) => {
        setIsRequesting(false);

        if (err === 404) setWebsite(null);

        console.log(err);
      });
  }, []);

  if (!isDevelopmentEnv()) return <PageInDevelopment />;

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

  if (!website) {
    return <NoWebsiteCreateOne setWebsite={setWebsite} />;
  }

  return (
    <>
      {notificationContextHolder}

      <Card>
        <Tabs
          defaultActiveKey={0}
          items={tabItems}
          activeKey={activeTab}
          onChange={(key) => setActiveTab(key)}
        />
      </Card>
    </>
  );
}

function NoWebsiteCreateOne({ setWebsite }) {
  const { t } = useTranslation();
  const [notificationApi, notificationContextHolder] =
    notification.useNotification();

  const { storeId } = useParams();

  const [isRequesting, setIsRequesting] = useState(false);

  const handleCreateWebsite = () => {
    setIsRequesting(true);

    myFetch({
      url: "/website",
      method: "POST",
      body: {
        storeId,
      },
      notificationApi: notificationApi,
      t: t,
    })
      .then((res) => {
        console.log(res);

        setWebsite({});
      })
      .catch((err) => {
        setIsRequesting(false);

        console.log(err);
      });
  };

  return (
    <MyCenteredContainer>
      {notificationContextHolder}

      <Result
        status="404"
        title={t("storeWebsite.noWebsite.title")}
        subTitle={t("storeWebsite.noWebsite.subTitle")}
        extra={
          <Button
            type="primary"
            loading={isRequesting}
            onClick={handleCreateWebsite}
          >
            {t("storeWebsite.noWebsite.button")}
          </Button>
        }
      />
    </MyCenteredContainer>
  );
}