import * as React from "react";
import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
import {
  Button,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TablePagination,
  TableRow,
  Typography,
} from "@mui/material";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import clsx from "clsx";
import ResponsiveDialog from "../widgets/DialogDelete";

function ListDetalleProductoRender() {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const handleChangePage = (event: unknown, newPage: number) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  const { t } = useTranslation("products");
  const columns = [
    "Código",
    "Nombre",
    "Descripción",
    "Stock Mínimo",
    "Estado",
    "Acciones",
  ];

  const rows = [
    {
      artCodigo: 1,
      artNombre: "Servicios Profesionales",
      artDescripcion: "Prestación de servicios",
      artStockMinimo: 0,
      artEstado: "activo",
      action: true,
    },
    {
      artCodigo: 2,
      artNombre: "Servicios Varios",
      artDescripcion: "",
      artStockMinimo: 0,
      artEstado: "inactivo",
      action: true,
    },
    {
      artCodigo: 3,
      artNombre: "Servicios Profesionales",
      artDescripcion: "Prestación de servicios",
      artStockMinimo: 0,
      artEstado: "activo",
      action: true,
    },
    {
      artCodigo: 4,
      artNombre: "Servicios Varios",
      artDescripcion: "",
      artStockMinimo: 0,
      artEstado: "inactivo",
      action: true,
    },
    {
      artCodigo: 5,
      artNombre: "Servicios Profesionales",
      artDescripcion: "Prestación de servicios",
      artStockMinimo: 0,
      artEstado: "activo",
      action: true,
    },
    {
      artCodigo: 6,
      artNombre: "Servicios Varios",
      artDescripcion: "",
      artStockMinimo: 0,
      artEstado: "inactivo",
      action: true,
    },
  ];

  return (
    <Paper className="flex flex-col flex-auto p-24 shadow rounded-2 overflow-hidden mt-6">
      <div className="flex md:flex-row justify-between flex-col">
        <div>
          <Typography className="mr-16 text-lg font-medium tracking-tight leading-6 truncate">
            {t("Detalle de productos")}
          </Typography>
        </div>
        <div>
          <Button
            size="small"
            variant="contained"
            color="secondary"
            component={Link}
            to={"/product/form"}
            startIcon={
              <FuseSvgIcon
                className="text-48 text-white"
                size={24}
                color="action"
              >
                heroicons-outline:plus
              </FuseSvgIcon>
            }
          >
            Registrar Producto
          </Button>
        </div>
      </div>
      <div className="table-responsive mt-24">
        <Table className="simple w-full min-w-full h-full">
          <TableHead>
            <TableRow>
              {columns.map((column, index) => (
                <TableCell key={index}>
                  <Typography
                    color="text.secondary"
                    className="font-semibold text-12 whitespace-nowrap"
                  >
                    {column}
                  </Typography>
                </TableCell>
              ))}
            </TableRow>
          </TableHead>

          <TableBody>
            {rows
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, index) => (
                <TableRow key={index}>
                  {Object.entries(row).map(([key, value]) => {
                    switch (key) {
                      case "artEstado": {
                        return (
                          <TableCell key={key} component="th" scope="row">
                            <Typography
                              className={clsx(
                                "inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase",
                                value === "inactivo" &&
                                  "bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50",
                                value === "activo" &&
                                  "bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50"
                              )}
                            >
                              {value}
                            </Typography>
                          </TableCell>
                        );
                      }
                      case "action": {
                        return (
                          <TableCell
                            key={key}
                            component="th"
                            scope="row"
                            className="flex gap-5"
                          >
                            <div>
                              <IconButton size="small" color="inherit">
                                <FuseSvgIcon>
                                  heroicons-outline:pencil-alt
                                </FuseSvgIcon>
                              </IconButton>
                            </div>
                            <div>
                              <ResponsiveDialog></ResponsiveDialog>
                            </div>
                          </TableCell>
                        );
                      }
                      default: {
                        return (
                          <TableCell key={key} component="th" scope="row">
                            <Typography>{value}</Typography>
                          </TableCell>
                        );
                      }
                    }
                  })}
                </TableRow>
              ))}
          </TableBody>
        </Table>
        <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        />
      </div>
    </Paper>
  );
}

export default ListDetalleProductoRender;
