import React, { useState } from "react";

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

import { ContribInlines } from "../../../../components/ContribInlines";
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, RightColumn } from "../../../../containers/Content";
import { PageComponent } from "../../../../types";
import { ArticleCard } from "../../components/ArticleCard";
import { MeasurementsCard } from "../../components/MeasurementsCard";
import { ArticleDetail } from "../../types/article";
import { PHYSICAL_ITEM_TYPES } from "../../utils";

const ArticleDetailPage: PageComponent<ArticleDetail> = ({ data }) => {
  const [article, setArticle] = useState(data);

  return (
    <Page>
      <Header variant="opaque">
        <TitleBar
          title={
            <>
              {data.name}
              <Typography sx={{ pl: 1 }} variant="button">
                {data.code}
              </Typography>
            </>
          }
        />
        <Tabs data={article}>
          <Tab key="default" icon={<CategoryOutlinedIcon />} label="Article" value="default" />
        </Tabs>
      </Header>

      <TabPanels contribParams={{ code: data.code }}>
        <TabPanel key="default" value="default">
          <Content layout="fixedWidth">
            <LeftColumn>
              <ArticleCard article={article} onUpdated={setArticle} />
              <ContribInlines contribParams={{ code: data.code }} data={data} />
            </LeftColumn>

            <RightColumn>
              {PHYSICAL_ITEM_TYPES.includes(article.item_type) && (
                <MeasurementsCard
                  measurements={article.measurements}
                  setMeasurements={(measurements) =>
                    setArticle((previous) => ({ ...previous, measurements }))
                  }
                />
              )}
            </RightColumn>
          </Content>
        </TabPanel>
      </TabPanels>
    </Page>
  );
};

export default ArticleDetailPage;