import React, { useEffect, useState } from "react";

import CategoryOutlinedIcon from "@mui/icons-material/CategoryOutlined";

import { Header } from "../../../../components/Header";
import { Page } from "../../../../components/Page";
import { Tab } from "../../../../components/Tab";
import { TabPanel } from "../../../../components/TabPanel";
import { TabPanels } from "../../../../components/TabPanels";
import { Tabs } from "../../../../components/Tabs";
import { TitleBar } from "../../../../components/TitleBar";
import Content, { LeftColumn } from "../../../../containers/Content";
import { useApi } from "../../../../contexts/ApiContext";
import { useRouter } from "../../../../contexts/RouterContext";
import { PageComponent } from "../../../../types";
import { ProductCard } from "../../components/ProductCard";
import { ProductItemTypeOption } from "../../types/product";

const ProductCreatePage: PageComponent = () => {
  const { navigate } = useRouter();
  const api = useApi();

  const [productItemTypes, setProductItemTypes] = useState<ProductItemTypeOption[]>([]);

  useEffect(() => {
    api.operations["pim.item_types:options"].call({}).then(async (response) => {
      if (response.ok) {
        setProductItemTypes(await response.json());
      }
    });
  }, []);

  return (
    <Page>
      <Header variant="opaque">
        <TitleBar title="Create Product" />
        <Tabs>
          <Tab key="default" icon={<CategoryOutlinedIcon />} label="Product" value="default" />
        </Tabs>
      </Header>

      <TabPanels>
        <TabPanel key="default" value="default">
          <Content layout="fixedWidth">
            <LeftColumn>
              <ProductCard
                create
                itemTypes={productItemTypes}
                onCreated={(product) => {
                  navigate(`pim.product:detail`, {
                    params: { id: product.id },
                  });
                }}
              />
            </LeftColumn>
          </Content>
        </TabPanel>
      </TabPanels>
    </Page>
  );
};

export default ProductCreatePage;