import React from "react";

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

import Card from "../../../components/Card";
import CardContent from "../../../components/Card/CardContent";
import CardHeader from "../../../components/Card/CardHeader";
import Table from "../../../components/Table";
import { TableCell } from "../../../components/Table/TableCell";
import { useI18n } from "../../../contexts/I18nContext";
import { useRouter } from "../../../contexts/RouterContext";
import { ContribComponent } from "../../../types";
import { ProductArticle } from "../types/contrib";

const ProductArticlesCard: ContribComponent<ProductArticle[]> = ({ data }) => {
  const { t } = useI18n();
  const { navigate } = useRouter();

  const articles = data;

  return (
    <Card>
      <CardHeader title={t("Articles")} />
      <CardContent
        sx={{
          p: 0,
          "&:last-child": { pb: 0 },
        }}
      >
        <Table
          count={articles.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",
              },
            }}
          >
            {articles.map((article) => {
              return (
                <TableRow
                  key={article.id}
                  hover
                  sx={() => ({
                    cursor: "pointer",
                  })}
                  onClick={() => navigate("catalog.article:detail", { params: { id: article.id } })}
                >
                  <TableCell>{article.variant}</TableCell>
                  <TableCell
                    typographyProps={{
                      variant: "caption",
                      color: "text.secondary",
                    }}
                  >
                    {article.code}
                  </TableCell>
                  <TableCell align="right" padding="checkbox">
                    <NavigateNextIcon color="action" fontSize="small" />
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
};

export default ProductArticlesCard;