import React 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 { useRouter } from "../../../../contexts/RouterContext";
import { PageComponent } from "../../../../types";
import { ArticleCard } from "../../components/ArticleCard";

const ArticleCreatePage: PageComponent = () => {
  const { navigate } = useRouter();

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

      <TabPanels>
        <TabPanel key="default" value="default">
          <Content layout="fixedWidth">
            <LeftColumn>
              <ArticleCard
                create
                onCreated={(article) => {
                  navigate(`catalog.article:detail`, {
                    params: { id: article.id },
                  });
                }}
              />
            </LeftColumn>
          </Content>
        </TabPanel>
      </TabPanels>
    </Page>
  );
};

export default ArticleCreatePage;