import { TableHead, TableRow } from '@mui/material';

import type { ListingVariant } from '@centreon/ui-context';

import { closestCenter, type DraggableSyntheticListeners } from '@dnd-kit/core';
import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
import { equals, find, map, pick, propEq } from 'ramda';
import { memo, useCallback } from 'react';

import SortableItems from '../../SortableItems';
import { getVisibleColumns, type Props as ListingProps } from '..';
import type { Column } from '../models';
import ListingHeaderCell from './Cell/ListingHeaderCell';
import {
  SelectActionListingHeaderCell,
  type SelectActionListingHeaderCellProps
} from './Cell/SelectActionListingHeaderCell';

type Props = Pick<
  ListingProps<unknown>,
  | 'sortField'
  | 'sortOrder'
  | 'onSort'
  | 'columns'
  | 'checkable'
  | 'onSelectColumns'
  | 'columnConfiguration'
  | 'totalRows'
> & {
  areColumnsEditable: boolean;
  listingVariant?: ListingVariant;
  memoProps: Array<unknown>;
  rowCount: number;
} & SelectActionListingHeaderCellProps;

interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
  attributes: Record<string, unknown>;
  id: string;
  isDragging: boolean;
  isInDragOverlay?: boolean;
  itemRef: React.RefObject<HTMLDivElement>;
  listeners: DraggableSyntheticListeners;
  style: React.CSSProperties;
}

const ListingHeader = ({
  sortOrder,
  sortField,
  rowCount,
  columns,
  columnConfiguration,
  onSort,
  onSelectColumns,
  checkable,
  memoProps,
  areColumnsEditable,
  listingVariant,
  onSelectAllClick,
  selectedRowCount,
  predefinedRowsSelection,
  onSelectRowsWithCondition
}: Props): JSX.Element => {
  const visibleColumns = getVisibleColumns({
    columnConfiguration,
    columns
  });

  const getColumnById = useCallback(
    (id: string): Column => {
      return find(propEq(id, 'id'), columns) as Column;
    },
    [columns]
  );

  const Content = useCallback(
    ({
      isInDragOverlay,
      listeners,
      attributes,
      style,
      isDragging,
      itemRef,
      id
    }: ContentProps): JSX.Element => {
      return (
        <ListingHeaderCell
          areColumnsEditable={areColumnsEditable}
          column={getColumnById(id)}
          columnConfiguration={columnConfiguration}
          isDragging={isDragging}
          isInDragOverlay={isInDragOverlay}
          itemRef={itemRef}
          listingVariant={listingVariant}
          onSort={onSort}
          sortField={sortField}
          sortOrder={sortOrder}
          style={style}
          {...listeners}
          {...attributes}
        />
      );
    },
    [
      columnConfiguration,
      sortField,
      sortOrder,
      areColumnsEditable,
      getColumnById,
      listingVariant,
      onSort
    ]
  );

  return (
    <TableHead className="contents" component="div">
      <TableRow className="contents" component="div">
        {checkable && (
          <SelectActionListingHeaderCell
            onSelectAllClick={onSelectAllClick}
            onSelectRowsWithCondition={onSelectRowsWithCondition}
            predefinedRowsSelection={predefinedRowsSelection}
            rowCount={rowCount}
            selectedRowCount={selectedRowCount}
          />
        )}
        <SortableItems
          additionalProps={[sortField, sortOrder]}
          Content={Content}
          collisionDetection={closestCenter}
          itemProps={['id']}
          items={visibleColumns}
          memoProps={memoProps}
          onDragEnd={({ items }): void => {
            onSelectColumns?.(items);
          }}
          sortingStrategy={horizontalListSortingStrategy}
          updateSortableItemsOnItemsChange
        />
      </TableRow>
    </TableHead>
  );
};

const columnMemoProps = [
  'id',
  'label',
  'rowMemoProps',
  'sortField',
  'sortOrder',
  'sortable',
  'type'
];

const MemoizedListingHeader = memo<Props>(
  ListingHeader,
  (prevProps, nextProps) =>
    equals(prevProps.sortOrder, nextProps.sortOrder) &&
    equals(prevProps.sortField, nextProps.sortField) &&
    equals(prevProps.selectedRowCount, nextProps.selectedRowCount) &&
    equals(prevProps.rowCount, nextProps.rowCount) &&
    equals(
      map(pick(columnMemoProps as Array<keyof Column>), prevProps.columns),
      map(pick(columnMemoProps as Array<keyof Column>), nextProps.columns)
    ) &&
    equals(prevProps.checkable, nextProps.checkable) &&
    equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&
    equals(prevProps.memoProps, nextProps.memoProps) &&
    equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable) &&
    equals(prevProps.listingVariant, nextProps.listingVariant)
);

export { MemoizedListingHeader as ListingHeader };