import { TableCell, TableHead, TableRow, TableSortLabel } from "@mui/material";
import React from "react";
import { Checkbox } from "../..";
import { DragAndDrop } from "./DragAndDrop";
import { Column } from "../types";

export const Header = (props: any) => {
  const {
    disableItemSelection = false,
    columnsView,
    onChangeColumns,
    hideDragable,
    selectedItems,
    onChageSelectedItems,
    dataItems,
    onCollapse,
    sort,
    onChangeSort,
  } = props;
  const renderItemSortLabel = (item: Column) => {
    const { key, sortField, title } = item;
    return (
      <TableSortLabel
        active={sort?.key === key}
        direction={sort?.key === key ? sort?.order : "asc"}
        onClick={() => {
          let newSort = sort;
          if (sort?.key === key)
            newSort = {
              key: key,
              order: sort?.order == "asc" ? "desc" : "asc",
              sortField,
            };
          else newSort = { key: key, order: "asc", sortField };
          onChangeSort(newSort);
        }}
      >
        {title}
      </TableSortLabel>
    );
  };
  return (
    <TableHead>
      {hideDragable ? (
        <TableRow>
          {!disableItemSelection && (
            <TableCell padding="checkbox">
              <Checkbox
                isIndeterminate={
                  selectedItems.length > 0 &&
                  selectedItems.length < dataItems.length
                }
                checked={selectedItems.length === dataItems.length && dataItems.length > 0}
                onChange={(checked) => {
                  if (checked) {
                    if (
                      selectedItems.length > 0 &&
                      selectedItems.length < dataItems.length
                    ) {
                      onChageSelectedItems([]);
                    } else {
                      onChageSelectedItems(dataItems);
                    }
                  } else {
                    onChageSelectedItems([]);
                  }
                }}
              />
            </TableCell>
          )}

          {onCollapse && (
            <TableCell style={{ width: 50, padding: 0 }}></TableCell>
          )}
          {columnsView.map((item: any, index: any) => {
            const { width, title, style, className } = item;
            return (
              <TableCell
                key={index}
                className={className}
                style={{ width: width, minWidth: width, height: 44, ...style }}
              >
                {item.sort ? renderItemSortLabel(item) : title}
              </TableCell>
            );
          })}
        </TableRow>
      ) : (
        <DragAndDrop
          items={columnsView}
          keyName="key"
          className="header_drag-drop-list-container"
          direction="horizontal"
          itemRenderer={(col: any) => {
            return <div key={col.key}>{col.title}</div>;
          }}
          onDragEnd={(result: any) => {
            if (!result.destination) return;

            const newColumns = [...columnsView];

            const [reorderedItem] = newColumns.splice(result.source.index, 1);
            newColumns.splice(result.destination.index, 0, reorderedItem);

            onChangeColumns(newColumns);
          }}
          renderItemSortLabel={renderItemSortLabel}
          {...props}
        />
      )}
    </TableHead>
  );
};
