import {
  // Paper,
  // Table,
  // TableCell,
  // TableContainer,
  // TableRow,
  Typography,
} from "@mui/material";
import MUIDataTable from "mui-datatables";
import { useEffect, useState } from "react";
import { PropTypes } from "prop-types";
// import moment from "moment";

export const AdvancedTable = ({ columns, data, name, pagination }) => {
  const [rows, setRows] = useState(data);

  useEffect(() => {
    setRows(data);
  }, [data]);

  useEffect(() => {
    const d = data?.map((item) => {
      return item?.map((row) => {
        if (!row && row !== 0) {
          return "";
        } else {
          return row;
        }
      });
    });
    setRows(d);
  }, [data]);

  const options = {
    viewColumns: false,
    filter: true,
    print: false,
    download: false,
    selectableRowsHeader: false,
    selectableRowsHideCheckboxes: true,
    responsive: "vertical",
    pagination: pagination ? pagination : true,
    fixedHeader: true,
    tableBodyMaxHeight: "70vh",
    // localization
    textLabels: {
      body: {
        noMatch: "داده ای جهت نمایش موجود نیست!",
        toolTip: "مرتب سازی",
        columnHeaderTooltip: (column) => `مرتب سازی بر اساس ${column.label}`,
      },
      pagination: {
        next: "صفحه بعد",
        previous: "صفحه قبل",
        rowsPerPage: "تعداد سطر در هر صفحه:",
        displayRows: "تعداد کل نتایج: ",
      },
      toolbar: {
        search: "جستجو",
        downloadCsv: "دانلود CSV",
        print: "پرینت",
        viewColumns: "نمایش سطون ها",
        filterTable: "فیلتر جدول",
      },
      filter: {
        all: "همه",
        title: "فیلترها",
        reset: "پاکسازی",
      },
      viewColumns: {
        title: "نمایش ستون ها",
        titleAria: "نمایش/بستن ستون های جدول",
      },
      selectedRows: {
        text: "سطر انتخاب شده است",
        delete: "پاک کردن",
        deleteAria: "پاک کردن سطرهای انتخاب شده",
      },
    },
  };

  return (
    <MUIDataTable
      title={<Typography textAlign={"start"}>{name}</Typography>}
      data={rows}
      columns={columns}
      options={options}
    />
  );
};

AdvancedTable.propTypes = {
  columns: PropTypes.any,
  data: PropTypes.any,
  name: PropTypes.any,
  expandable: PropTypes.bool,
};
