import clsx from 'clsx';

import { GenericCellEditorProps, GridCell } from '../GridCell';
import { GridFormDropDown, GridFormDropDownProps } from '../gridForm/GridFormDropDown';
import { GridIcon } from '../GridIcon';
import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
import { ColDefT, GridBaseRow } from '../types';

export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any, TOptionValue = any>(
  colDef: GenericCellColDef<TData, TValue>,
  props: GenericCellEditorProps<GridFormDropDownProps<TData, TOptionValue>>,
): ColDefT<TData, TValue> => {
  colDef.cellRendererParams = {
    rightHoverElement: (
      <GridIcon icon={'ic_arrow_drop_down'} title={''} className={'GridCell-editableIcon GridCell-dropDownIcon'} />
    ),
    ...colDef.cellRendererParams,
  };
  return GridCell<TData, TValue, GridFormDropDownProps<TData, TOptionValue>>(colDef, {
    editor: GridFormDropDown,
    ...props,
    editorParams: {
      ...(props.editorParams as GridFormDropDownProps<TData, TOptionValue>),
      className: clsx(
        {
          'GridPopoverEditDropDown-containerLarge': !props.editorParams?.className?.includes(
            'GridPopoverEditDropDown-container',
          ),
        },
        props.editorParams?.className,
      ),
    },
  });
};