import { modelCategoriesMap } from '@/pages/llmodels/config';
import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
import { FiltersButton } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Input, Space } from 'antd';
import _ from 'lodash';
import React from 'react';

export interface RightActionsProps {
  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  handleSearch: () => void;
  handleQueryChange: (value: any, option?: any) => void;
  modelList?: Global.BaseOption<number, { categories: string[] }>[];
  datasetList?: Global.BaseOption<string | number>[];
  toggleFilters: () => void;
  count?: number;
  onClear: () => void;
}

const RightActions: React.FC<RightActionsProps> = ({
  handleInputChange,
  handleSearch,
  handleQueryChange,
  toggleFilters,
  count,
  onClear,
  modelList,
  datasetList
}) => {
  const intl = useIntl();

  const debounceUpdateFilter = _.debounce((e: any) => {
    handleQueryChange({
      page: 1,
      gpu_summary: e.target.value
    });
  }, 350);

  const handleGPUChange = debounceUpdateFilter;

  const modelOptions = modelList
    ?.filter((item) => {
      return item.categories?.includes(modelCategoriesMap.llm);
    })
    .map((item) => ({
      label: item.label,
      value: item.label
    }));

  return (
    <Space>
      <FiltersButton
        onClick={toggleFilters}
        count={count}
        onClear={onClear}
      ></FiltersButton>
      <Input
        prefix={
          <SearchOutlined
            style={{ color: 'var(--ant-color-text-placeholder)' }}
          ></SearchOutlined>
        }
        placeholder={intl.formatMessage({
          id: 'common.filter.name'
        })}
        style={{ width: 300 }}
        allowClear
        onChange={handleInputChange}
      ></Input>
      {/* <Input
        prefix={
          <SearchOutlined
            style={{ color: 'var(--ant-color-text-placeholder)' }}
          ></SearchOutlined>
        }
        placeholder={intl.formatMessage({ id: 'benchmark.table.filter.bygpu' })}
        style={{ width: 160 }}
        allowClear
        onChange={handleGPUChange}
      ></Input>
      <BaseSelect
        allowClear
        placeholder={intl.formatMessage({
          id: 'benchmark.table.filter.byProfile'
        })}
        style={{ width: 160 }}
        options={[
          ...profileOptions,
          {
            label: 'backend.custom',
            locale: true,
            value: 'Custom'
          }
        ].map((item) => ({
          label: item.locale
            ? intl.formatMessage({ id: item.label })
            : item.label,
          value: item.value
        }))}
        onChange={(value, option) =>
          handleQueryChange({
            profile: value,
            page: 1
          })
        }
      ></BaseSelect>
      <BaseSelect
        allowClear
        placeholder={intl.formatMessage({
          id: 'benchmark.table.filter.bymodel'
        })}
        style={{ width: 180 }}
        options={modelOptions}
        onChange={(value, option) =>
          handleQueryChange({
            model_name: value,
            page: 1
          })
        }
      ></BaseSelect> */}
      <Button
        type="text"
        style={{ color: 'var(--ant-color-text-tertiary)' }}
        onClick={handleSearch}
        icon={<SyncOutlined></SyncOutlined>}
      ></Button>
    </Space>
  );
};

export default RightActions;
