import clsx from 'clsx';
import type { GridColumnHeaderParams } from '@mui/x-data-grid-pro';
import { TextWithTooltip } from '../../text-with-tooltip';
import type { TextWithTooltipProps } from '../../text-with-tooltip';
import { FilterFieldTooltip } from '../components/FilterFieldTooltip/FilterFieldTooltip';
import { FilterFieldTooltipProps } from '../components/FilterFieldTooltip/types';
import type { GridColDef } from '../types';

export const createColumnHeaderRenderer =
  ({
    filters,
    setFilters,
    handleFilterChange,
    textClassName
  }: {
    filters: FilterFieldTooltipProps['filters'];
    setFilters: FilterFieldTooltipProps['setFilters'];
    handleFilterChange: FilterFieldTooltipProps['handleFilterChange'];
    textClassName: TextWithTooltipProps['textClassName'];
  }) =>
  (params: GridColumnHeaderParams) => {
    const { colDef, field } = params;
    const { headerName, description, filterable } = (colDef || {}) as GridColDef;
    return (
      <>
        <TextWithTooltip
          disableInteractive
          numOfLines={1}
          text={headerName || ''}
          title={description || ''}
          textClassName={clsx('MuiDataGrid-columnHeaderTitle', textClassName)}
        />
        {filterable && (
          <FilterFieldTooltip
            colDef={colDef as GridColDef}
            field={field}
            filters={filters}
            setFilters={filters => setFilters(filters || {})}
            handleFilterChange={handleFilterChange}
          />
        )}
      </>
    );
  };