import React, { useEffect, useState, useRef } from "react";
import DataTable from "react-data-table-component";
import { useSelector } from "react-redux";
import { RootState } from "redux/reducers";
import { useAppDispatch } from "redux/store";
import { reset{modelName}ToInit, set{modelName}Message } from "redux/actions";
import { blueGrey } from "@mui/material/colors";
import { Archive as ArchiveIcon } from "components/icons/archive";
import { DocumentText as DocumentTextIcon } from "components/icons/document-text";
import { Download as DownloadIcon } from "components/icons/download";
import { PencilAlt as PencilAltIcon } from "components/icons/pencil-alt";
import { Trash as TrashIcon } from "components/icons/trash";
import {
  Box,
  Button,
  CardMedia,
  CircularProgress,
  Table,
  TableBody,
  TableCell,
  TableRow,
  Card,
  CardHeader,
  CardContent,
  Menu,
  MenuItem,
  ListItemIcon,
  CardActions,
  ListItemText,
  Tooltip,
  TextField,
  InputAdornment,
  Link,
  Avatar,
  Container,
  Divider,
  IconButton,
  List,
  ListItem,
  ListItemAvatar,
  Paper,
  Chip,
  Rating,
  CardActionArea,
  Grid,
  Typography,
} from "@mui/material";
import { Constant } from "template/Constant";
import ConfirmationModal from "template/ConfirmationModal";
import { delete{modelName} } from "services/{tableName}Service";
import { set{modelName}List } from "redux/actions";
import { get{modelName} } from "services/{tableName}Service";
import AddIcon from "@mui/icons-material/Add";
import RefreshIcon from "@mui/icons-material/Refresh";
import { DataGrid, GridToolbar } from "@mui/x-data-grid";
import numeral from "numeral";
import { makeStyles } from "@mui/styles";
import FavoriteIcon from "@mui/icons-material/Favorite";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import { WidgetPreviewer } from "components/MUI_Theme/WidgetPreviewer";
import type { FC } from "react";
import { red } from "@mui/material/colors";
import { Clock as ClockIcon } from "components/icons/clock";
import { Share as ShareIcon } from "components/icons/share";
import { ArrowRight as ArrowRightIcon } from "components/icons/arrow-right";
import { DotsHorizontal as DotsHorizontalIcon } from "components/icons/dots-horizontal";
import { Image as ImageIcon } from "components/icons/image";
import {
  formatDistanceToNowStrict,
  parse,
  subHours,
  subMinutes,
} from "date-fns";
import { styled } from "@mui/material/styles";
import { useRowSelector } from "Dnd/Dnd Designer/Utility/constants";
import { format, subSeconds } from "date-fns";
const now = new Date();
type Props = {
  hideShowForm: (action: string) => void;
  handleRowEdit: (row: any) => void;
  getData: (page: number, pageSize: number, searchKey: string) => void;
  config: any;
  openLink: any;
  columnDefinitions: any[];
};
const BlogPostCardMediaWrapper = styled("div")({
  paddingTop: "calc(100% * 4 / 4)",
  position: "relative",
});

export const {modelName}Table: React.FC<Props> = ({
  hideShowForm,
  handleRowEdit,
  getData,
  columnDefinitions,
  config,
  openLink,
}) => {
  const dispatch = useAppDispatch();
  const [search, setSearch] = useState("");
  const [showDelete, setShowDelete] = useState(false);
  const [rowData, setRowData] = useState<any>(undefined);
  const rData = useSelector((state: RootState) => state.{tableName});
  const {modelName}Data = useSelector((state: RootState) => state.{tableName});
  const moreRef = useRef<HTMLButtonElement | null>(null);
  const [openMenu, setOpenMenu] = useState<boolean>(false);

  const handleMenuOpen = (): void => {
    setOpenMenu(true);
  };

  const handleMenuClose = (): void => {
    setOpenMenu(false);
  };

  useEffect(() => {
    if ({modelName}Data && {modelName}Data.list && {modelName}Data.list.length === 0) {
      dispatch(reset{modelName}ToInit());
      get{modelName}(
        Constant.defaultPageNumber,
        Constant.defaultDropdownPageSize,
        ""
      ).then((response) => {
        if (response && response.records) {
          dispatch(
            set{modelName}List({
              pageNo: Constant.defaultPageNumber,
              pageSize: Constant.defaultDropdownPageSize,
              list: response.records,
              totalCount: response.total_count,
              searchKey: "",
            })
          );
        } else {
          dispatch(set{modelName}Message(`No Record Found For {modelName}`));
        }
      });
    }
  }, [{modelName}Data.list.length]);

  const handleSearch = () => {
    if (search.length > 0) {
      getData(Constant.defaultPageNumber, Constant.defaultPageSize, search);
    }
  };

  const handlePerRowsChange = async (newPerPage: number, page: number) => {
    await getData(page, newPerPage, "");
  };

  const handlePageChange = (page: number) => {
    getData(page, rData.pageSize, "");
  };

  const handleRowDeleteClick = (row: any) => {
    setRowData(row);
    setShowDelete(true);
  };

  useEffect(() => {
    if (rData && rData.list && rData.list.length === 0) {
      dispatch(reset{modelName}ToInit());
      getData(Constant.defaultPageNumber, Constant.defaultPageSize, "");
    }
  }, [rData.list.length]);

  const handleReset = () => {
    setSearch("");
    dispatch(reset{modelName}ToInit());
    getData(Constant.defaultPageNumber, rData.pageSize, "");
  };

  const handleServerDelete = async () => {
    if (rowData) {
      const response = await delete{modelName}(rowData.user_id);
      if (response) {
        dispatch(reset{modelName}ToInit());
        dispatch(set{modelName}Message("Deleted Successfully"));
        getData(Constant.defaultPageNumber, Constant.defaultPageSize, "");
        setShowDelete(false);
      } else {
        dispatch(set{modelName}Message("Some error occurred!"));
      }
    }
  };

  const handleRowSelection = (row: any) => {
   //console.log(row); // Row Selection Functionality can be written here
  };

  const handleAddButtonClick = () => {
    dispatch(set{modelName}Message(""));
    hideShowForm("add");
  };

  const columns = [
    ...columnDefinitions,
    {
      field: "edit",
      headerName: "",
      sortable: false,
      width: 100,
      renderCell: (params) => (
        <Button
          variant="contained"
          size="small"
          onClick={() => handleRowEdit(params.row)}
        >
          Edit
        </Button>
      ),
      hide:
        config["edit_button_visible1"] !== undefined
          ? !config["edit_button_visible1"]
          : false,
    },
    {
      field: "delete",
      headerName: "",
      sortable: false,
      width: 100,
      renderCell: (params) => (
        <Button
          variant="contained"
          color="secondary"
          size="small"
          onClick={() => handleRowDeleteClick(params.row)}
        >
          Delete
        </Button>
      ),
      hide:
        config["delete_button_visible1"] !== undefined
          ? !config["delete_button_visible1"]
          : false,
    },
  ];
  const handleButtonClick = (params, passValue, type) => {};
  if (config["nav_count"] !== undefined) {
    for (let i = 0; i < config.nav_count; i++) {
      if (config[`nav_${i}_button_name`] === undefined) continue;
      const buttonName = config[`nav_${i}_button_name`];
      const passValue = config[`nav_${i}_pass_value`];
      const column = config[`nav_${i}_column`];
      const type = config[`nav_${i}_type`];
      const newButtonColumn = {
        field: buttonName,
        headerName: "",
        sortable: false,
        width: 100,
        renderCell: (params) => (
          <Button
            style={{
              whiteSpace: "normal", // Allows the text to wrap
              wordWrap: "break-word", // Ensures long words are broken and wrapped
            }}
            variant="contained"
            color="primary"
            size="small"
            onClick={() => {
              // handleButtonClick(
              //   params.row,
              //   passValue ? params.row[column] : null,
              //   type
              // )
              if (passValue) {
                const condition = {
                  columnName: column,
                  columnCondition: 1,
                  columnValue: params.row[column].toString(),
                };
                openLink(config[`nav_${i}_page`], condition);
              } else {
                openLink(config[`nav_${i}_page`]);
              }
            }}
          >
            {buttonName}
          </Button>
        ),
      };

      columns.push(newButtonColumn);
    }
  }
  const GetSrcData = (a, b, c, d) => {
    return useRowSelector(a, b, c, d);
  };
  const filteredColumns = columns; //.filter((column) => column.visible);

  return (
    <>
      <Card className="shadow mb-4">
        <CardHeader
          style={{
            backgroundColor:
              config["tableHeadBackgroundColor"] !== undefined
                ? config["tableHeadBackgroundColor"]
                : "white",
            color:
              config["HeadColor"] !== undefined ? config["HeadColor"] : "black",
          }}
          title={
            <div>
              <span>
                {config["tableHeading"] !== undefined
                  ? config["tableHeading"]
                  : "{modelName} List"}{" "}
                ({rData.list.length})
              </span>
              <IconButton onClick={handleReset}>
                <RefreshIcon
                  style={{
                    color:
                      config["HeadColor"] !== undefined
                        ? config["HeadColor"]
                        : "black",
                  }}
                />
              </IconButton>
            </div>
          }
          action={
            <>
              {(config[`add_new_button_visible1`] ||
                config[`add_new_button_visible1`] === undefined) && (
                <Button
                  className="btn-icon-split float-right"
                  onClick={handleAddButtonClick}
                  variant="contained"
                  endIcon={<AddIcon />}
                >
                  {config[`add_new_button_new_name1`] !== undefined
                    ? config[`add_new_button_new_name1`]
                    : "Add New"}
                </Button>
              )}
            </>
          }
        />
        <CardContent>
          <Grid container spacing={2} justifyContent="flex-end">
            <Grid item xs={12} md={3}>
              {(config[`search_button_visible1`] ||
                config[`search_button_visible1`] === undefined) && (
                <TextField
                  placeholder="Search"
                  variant="outlined"
                  fullWidth
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        <Button
                          disabled={search.length <= 2}
                          variant="contained"
                          onClick={handleSearch}
                        >
                          Search
                        </Button>
                      </InputAdornment>
                    ),
                  }}
                />
              )}
            </Grid>
          </Grid>
          <Box
            sx={{
              backgroundColor: "background.default",
              p: 3,
            }}
          >
            <Card>
              <CardHeader title="Latest Transactions" />
              <Table>
                <TableBody>
                  {rData.list.map((file, index) => (
                    <TableRow
                      key={file[0] + index}
                      sx={{
                        "&:last-child td": {
                          border: 0,
                        },
                      }}
                    >
                      <TableCell width={100}>
                        <Box sx={{ p: 1 }}>
                          <Typography
                            align="center"
                            color="textSecondary"
                            variant="subtitle2"
                          >
                            {format(
                              file[config["date_ref_gv1_column"]],
                              "LLL"
                            ).toUpperCase()}
                          </Typography>
                          <Typography
                            align="center"
                            color="textSecondary"
                            variant="h6"
                          >
                            {format(file[config["date_ref_gv1_column"]], "d")}
                          </Typography>
                        </Box>
                      </TableCell>
                      <TableCell>
                        <Typography variant="subtitle2">
                          {file[config["sender_ref_gv1_column"]]}
                        </Typography>
                        <Typography color="textSecondary" variant="body2">
                          {file[config["type_ref_gv1_column"]] === "receive"
                            ? "Payment received"
                            : "Payment sent"}
                        </Typography>
                      </TableCell>
                      <TableCell align="right">
                        <Typography
                          color={
                            file[config["type_ref_gv1_column"]] === "receive"
                              ? "success.main"
                              : "error.main"
                          }
                          variant="subtitle2"
                        >
                          {file[config["type_ref_gv1_column"]] === "receive"
                            ? "+"
                            : "-"}{" "}
                          {numeral(
                            file[config["amount_ref_gv1_column"]]
                          ).format("$0,0.00")}
                        </Typography>
                        <Typography color="textSecondary" variant="body2">
                          {file[
                            config["currency_ref_gv1_column"]
                          ].toUpperCase()}
                        </Typography>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Card>
          </Box>
        </CardContent>
        <ConfirmationModal
          buttonNegative="Cancel"
          buttonPositive="Delete"
          title="Delete Confirmation"
          show={showDelete}
          body="Are you sure?"
          onNegative={() => setShowDelete(false)}
          onPositive={handleServerDelete}
        />
      </Card>
    </>
  );
};
