import {
  IconButton,
  List,
  ListItem,
  ListItemPrefix,
  Popover,
  PopoverContent,
  PopoverHandler,
  Typography,
} from "@material-tailwind/react";
import React, { useCallback } from "react";
import { BsChevronExpand } from "react-icons/bs";
import { HiDotsHorizontal } from "react-icons/hi";

import {
  ITableComponentHeadersType,
  ITableComponentItemsType,
  ResultPaginate,
} from "../types";

// import { TablePaginationComponent } from './TablePaginationComponent';

export type TableComponentProps = {
  children?: React.ReactNode;
  headers: Array<ITableComponentHeadersType>;
  items?: Array<ITableComponentItemsType>;
  pagination?: ResultPaginate<any>;
  onSort: (key: string) => void;
};

export default function TableComponent({
  children,
  headers,
  items,
  // pagination,
  onSort,
}: TableComponentProps) {
  //
  const classes = useCallback((isLast: boolean) => {
    return isLast ? "p-4" : "p-4 border-b border-blue-gray-50";
  }, []);

  return (
    <>
      <table className="mt-4 w-full min-w-max table-auto text-left">
        <thead>
          <tr>
            {headers.map(({ name, key, canSort }, _index) => (
              <th
                key={_index}
                className="cursor-pointer border-y border-blue-gray-100 bg-blue-gray-50/50 p-4 transition-colors hover:bg-blue-gray-50"
              >
                <Typography
                  variant="small"
                  color="blue-gray"
                  className="flex items-center gap-2 font-normal leading-none opacity-70"
                  onClick={() => (canSort ? onSort(key) : {})}
                >
                  {name}{" "}
                  {canSort && (
                    <BsChevronExpand strokeWidth={0.1} className="size-3" />
                  )}
                </Typography>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {items && items?.length > 0
            ? items.map((item, index) => (
                <tr key={index}>
                  {item.lineItems.map((lineItem, lineIndex) => (
                    <td key={lineIndex} className={classes(item.isLast)}>
                      {lineItem.key == "actions" ? (
                        <>
                          <Popover placement="bottom-end">
                            <PopoverHandler>
                              <IconButton
                                variant="outlined"
                                className="p-0 ml-2 rounded-full bg-gray-100/40 border-none mt-[-8px]"
                              >
                                <HiDotsHorizontal className="size-4" />
                              </IconButton>
                            </PopoverHandler>
                            <PopoverContent className="p-1 py-2">
                              <List className="py-0">
                                {lineItem.value?.map(
                                  (
                                    {
                                      name: actionName,
                                      icon,
                                      isActive: actionActive,
                                      callback,
                                    },
                                    i,
                                  ) =>
                                    actionActive && (
                                      <ListItem
                                        key={i}
                                        onClick={callback}
                                        className="group rounded-lg py-1.5 text-sm font-normal text-blue-gray-700 hover:bg-purple-100 hover:text-purple-700 focus:bg-purple-100 focus:text-purple-700"
                                      >
                                        <ListItemPrefix>{icon}</ListItemPrefix>
                                        {actionName}
                                      </ListItem>
                                    ),
                                )}
                              </List>
                            </PopoverContent>
                          </Popover>
                        </>
                      ) : (
                        <>
                          {typeof lineItem.value == "string" ? (
                            <Typography
                              variant="small"
                              color="blue-gray"
                              className="font-normal"
                            >
                              {lineItem.value}
                            </Typography>
                          ) : (
                            lineItem.value
                          )}
                        </>
                      )}
                    </td>
                  ))}
                </tr>
              ))
            : children}
        </tbody>
      </table>

      {/* {pagination && (
                <TablePaginationComponent
                    totalPage={pagination.total}
                    currentPage={pagination.page}
                    limit={pagination.limit}
                />
            )} */}
    </>
  );
}
