import type { ProColumns } from '@ant-design/pro-components';
import type { SelectProps } from 'antd';
import { Select, Input, Space, Switch, Tooltip } from 'antd';
import { flatten } from 'lodash';
import style from './index.less';
import { FormattedMessage } from 'umi';
const { TextArea } = Input;

const TooltipSelect = (
  props: Pick<SelectProps, 'onChange' | 'value'> & { valueEnum: any; disabledKeys: any },
) => {
  const { value, onChange, valueEnum, disabledKeys } = props;

  return (
    <Tooltip title={valueEnum?.key.options?.find((item) => item.value === value)?.label || value}>
      <Select
        onChange={(val, option) => onChange?.(val, option)}
        value={value}
        disabled={valueEnum?.key?.disabled ?? false}
        allowClear
        style={{ width: '100%' }}
        options={valueEnum?.key.options?.map((item) => ({
          ...item,
          disabled: disabledKeys.includes(item.value) || item.disabled,
        }))}
      />
    </Tooltip>
  );
};

export const useProTableList = ({
  valueEnum,
  operatorHidden,
  isUniqueKey,
  dataSource,
  hiddenOrNotOperate,
}) => {
  const disabledKeys = isUniqueKey ? flatten(dataSource?.map((item) => item.key)) : [];
  const columns = [
    {
      title: 'key',
      dataIndex: 'key',
      width: valueEnum?.key?.width ?? '',
      renderFormItem: () => {
        return valueEnum?.key?.mode !== 'multiple' || valueEnum?.key?.mode !== 'tags' ? (
          <TooltipSelect valueEnum={valueEnum} disabledKeys={disabledKeys} />
        ) : (
          <Select
            disabled={valueEnum?.key?.disabled ?? false}
            mode={valueEnum?.key?.mode ?? ''}
            allowClear
            style={{ width: '100%' }}
            options={valueEnum?.key.options?.map((item) => ({
              ...item,
              disabled: disabledKeys.includes(item.value) || item.disabled,
            }))}
          />
        );
      },
    },
    {
      title: 'operator',
      dataIndex: 'operator',
      width: valueEnum?.operator?.width ?? '',
      hideInTable: !operatorHidden,
      renderFormItem: () => {
        return (
          <Select
            disabled={valueEnum?.operator?.disabled ?? false}
            placeholder
            mode={valueEnum?.operator?.mode ?? ''}
            allowClear
            popupClassName={style.drop}
            options={valueEnum?.operator?.options}
          />
        );
      },
    },
    {
      title: 'content',
      dataIndex: 'content',
      width: valueEnum?.content?.width ?? '',
      renderFormItem: () => {
        return hiddenOrNotOperate ? (
          <Input disabled={valueEnum?.content?.disabled ?? false} allowClear />
        ) : (
          <TextArea disabled={valueEnum?.content?.disabled ?? false} allowClear />
        );
      },
    },
    {
      title: <FormattedMessage id="base.common.operation" />,
      width: !hiddenOrNotOperate
        ? valueEnum?.option?.width < 220 || !valueEnum?.option?.width
          ? 220
          : valueEnum?.option?.width
        : valueEnum?.option?.width ?? '',
      valueType: 'option',
    },
  ];
  return {
    columns,
  };
};