import React, { useState } from "react";

import CategoryOutlinedIcon from "@mui/icons-material/CategoryOutlined";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import { TableBody, TableRow } from "@mui/material";
import Typography from "@mui/material/Typography";

import Card from "../../../../components/Card";
import CardContent from "../../../../components/Card/CardContent";
import CardHeader from "../../../../components/Card/CardHeader";
import { ContribInlines } from "../../../../components/ContribInlines";
import { Header } from "../../../../components/Header";
import { Page } from "../../../../components/Page";
import { Tab } from "../../../../components/Tab";
import Table from "../../../../components/Table";
import { TableCell } from "../../../../components/Table/TableCell";
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 { useI18n } from "../../../../contexts/I18nContext";
import { useRouter } from "../../../../contexts/RouterContext";
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);
  const { t } = useI18n();
  const { navigate } = useRouter();
  const hasOtherVariants = article.variants.some((variant) => variant.id !== article.id);

  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 }))
                  }
                />
              )}
              {hasOtherVariants && (
                <Card>
                  <CardHeader title={t("Variants")} />
                  <CardContent
                    sx={{
                      p: 0,
                      "&:last-child": { pb: 0 },
                    }}
                  >
                    <Table
                      count={article.variants.length}
                      tableContainerProps={{
                        sx: (theme) => ({
                          borderTop: `1px solid ${theme.palette.divider}`,
                          px: 0,
                        }),
                      }}
                    >
                      <TableBody
                        sx={{
                          "& .MuiTableRow-root:first-of-type .MuiTableCell-root": (theme) => ({
                            borderTop: `1px solid ${theme.palette.divider}`,
                          }),
                          "& .MuiTableRow-root:last-of-type .MuiTableCell-root": {
                            borderBottom: "none",
                          },
                        }}
                      >
                        {article.variants.map((variant) => {
                          const isCurrent = variant.id === article.id;
                          return (
                            <TableRow
                              key={variant.id}
                              hover
                              selected={isCurrent}
                              sx={(theme) => ({
                                cursor: "pointer",
                                ...(isCurrent
                                  ? {
                                      backgroundColor: theme.palette.action.hover,
                                      "& .MuiTableCell-root": {
                                        fontWeight: 600,
                                      },
                                    }
                                  : undefined),
                              })}
                              onClick={() =>
                                navigate("catalog.article:detail", { params: { id: variant.id } })
                              }
                            >
                              <TableCell>{variant.variant}</TableCell>
                              <TableCell
                                typographyProps={{
                                  variant: "caption",
                                  color: "text.secondary",
                                }}
                              >
                                {variant.code}
                              </TableCell>
                              <TableCell align="right" padding="checkbox">
                                <NavigateNextIcon color="action" fontSize="small" />
                              </TableCell>
                            </TableRow>
                          );
                        })}
                      </TableBody>
                    </Table>
                  </CardContent>
                </Card>
              )}
            </RightColumn>
          </Content>
        </TabPanel>
      </TabPanels>
    </Page>
  );
};

export default ArticleDetailPage;