import React from 'react';
import omit from 'lodash/omit';
import { FilterInterface } from '../../filters';
import { ApolloColumnType } from '../interfaces';
import Input from '../../input';
import Checkbox from '../../checkbox';
import Radio from '../../radio';
import DatePicker from '../../date-picker';
import Select from '../../select';
import { RangeInput } from '../components/RangeInput';

const { RangePicker } = DatePicker;

export const renderSearch = <T extends {}>(
  columns: ApolloColumnType<T>[],
  value: any,
  onChange: React.Dispatch<React.SetStateAction<any>>,
  getPrefixCls: (suffixCls?: string | undefined, customizePrefixCls?: string | undefined) => string,
): FilterInterface[] =>
  columns
    .filter(item => item.filterType)
    .map(item => {
      let key: string;
      if (item.key) {
        key = String(item.key);
      } else {
        key = String(
          Array.isArray(item.dataIndex)
            ? item.dataIndex[item.dataIndex.length - 1]
            : item.dataIndex,
        );
      }

      if (item.filterType === 'checkbox') {
        return {
          key,
          label: item.title,
          shortcut: item.search?.shortcut,
          disabled: item.search?.disabled,
          allowClear: item.search?.allowClear,
          filter: (
            <Checkbox.Group
              {...item.fieldProps}
              className={getPrefixCls('apollo-table-filter-checkbox')}
              options={item.valueEnum}
              value={value[key]}
              onChange={val => {
                if (val.length > 0) {
                  onChange({ ...value, [key]: val });
                } else {
                  onChange({ ...omit(value, [key]) });
                }

                if (item.fieldProps?.onChange) {
                  item.fieldProps.onChange(val);
                }
              }}
            />
          ),
        };
      }

      if (item.filterType === 'radio') {
        return {
          key,
          label: item.title,
          shortcut: item.search?.shortcut,
          disabled: item.search?.disabled,
          allowClear: item.search?.allowClear,
          filter: (
            <Radio.Group
              {...item.fieldProps}
              className={getPrefixCls('apollo-table-filter-radio')}
              options={item.valueEnum}
              value={value[key]}
              onChange={e => {
                onChange({ ...value, [key]: e.target.value });

                if (item.fieldProps?.onChange) {
                  item.fieldProps.onChange(e);
                }
              }}
            />
          ),
        };
      }

      if (item.filterType === 'select') {
        return {
          key,
          label: item.title,
          shortcut: item.search?.shortcut,
          disabled: item.search?.disabled,
          allowClear: item.search?.allowClear,
          filter: (
            <Select
              allowClear
              {...item.fieldProps}
              style={{ width: '100%', ...item.fieldProps?.style }}
              value={value[key]}
              onChange={(val, option) => {
                if (val) {
                  onChange({ ...value, [key]: val });
                } else {
                  onChange(omit(value, [key]));
                }

                if (item.fieldProps?.onChange) {
                  item.fieldProps.onChange(val, option);
                }
              }}
              options={item.valueEnum}
            />
          ),
        };
      }

      if (item.filterType === 'dateRange') {
        return {
          key,
          label: item.title,
          shortcut: item.search?.shortcut,
          disabled: item.search?.disabled,
          allowClear: item.search?.allowClear,
          filter: (
            <RangePicker
              allowClear
              {...item.fieldProps}
              style={{ width: '100%', ...item.fieldProps?.style }}
              value={value[key]}
              onChange={val => {
                if (val) {
                  onChange({
                    ...value,
                    [key]: val,
                  });
                } else {
                  onChange({ ...omit(value, [key]) });
                }

                if (item.fieldProps?.onChange) {
                  item.fieldProps.onChange(val);
                }
              }}
            />
          ),
        };
      }

      if (item.filterType === 'dateTimeRange') {
        return {
          key,
          label: item.title,
          shortcut: item.search?.shortcut,
          disabled: item.search?.disabled,
          allowClear: item.search?.allowClear,
          filter: (
            <RangePicker
              allowClear
              {...item.fieldProps}
              style={{ width: '100%', ...item.fieldProps?.style }}
              showTime
              value={value[key]}
              onChange={(dates, dateStrings) => {
                if (dates) {
                  onChange({ ...value, [key]: dates });
                } else {
                  onChange({ ...omit(value, [key]) });
                }

                if (item.fieldProps?.onChange) {
                  item.fieldProps.onChange(dates, dateStrings);
                }
              }}
            />
          ),
        };
      }

      if (item.filterType === 'rangeInput') {
        return {
          key,
          label: item.title,
          shortcut: item.search?.shortcut,
          disabled: item.search?.disabled,
          allowClear: item.search?.allowClear,
          filter: (
            <RangeInput
              fieldProps={{
                ...item.fieldProps,
                value: value[key],
                onChange: val => {
                  if (val) {
                    onChange({ ...value, [key]: val });
                  } else {
                    onChange({ ...omit(value, [key]) });
                  }
                },
              }}
            />
          ),
        };
      }

      return {
        key,
        label: item.title,
        shortcut: item.search?.shortcut,
        disabled: item.search?.disabled,
        allowClear: item.search?.allowClear,
        filter: (
          <Input
            allowClear
            {...item.fieldProps}
            value={value[key]}
            onChange={e => {
              if (e.target.value) {
                onChange({ ...value, [key]: e.target.value });
              } else {
                onChange({ ...omit(value, [key]) });
              }

              if (item.fieldProps?.onChange) {
                item.fieldProps.onChange(e);
              }
            }}
          />
        ),
      };
    });