import { UserOutlined } from '@ant-design/icons';
import { AutoComplete, Button, Input, TableProps } from 'antd';
import { SearchProps } from 'antd/lib/input/Search';
import styles from './Search.module.scss';
import classNames from 'classnames';

const { Search: SearchAntd } = Input;

export interface Search<TRecordType extends object = any>
  extends TableProps<TRecordType>,
    Pick<SearchProps, 'onSearch' | 'value'> {
  seleactedActions?: ReactNodes;
  actions?: ReactNodes;
}

// eslint-disable-next-line @typescript-eslint/no-redeclare
const Search = <TRecordType extends object = any>({
  translations,
}: any): JSX.Element => {
  const renderItem = (
    title: string,
    count: number,
  ): { value: string; label: JSX.Element } => ({
    value: title,
    label: (
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        {title}
        <span>
          <UserOutlined /> {count}
        </span>
      </div>
    ),
  });
  const renderTitle = (title: string): JSX.Element => (
    <span>
      {title}
      <a
        style={{ float: 'right' }}
        href="https://www.google.com/search?q=antd"
        target="_blank"
        rel="noopener noreferrer"
      >
        more
      </a>
    </span>
  );
  const options = [
    {
      label: renderTitle('Libraries'),
      options: [
        renderItem('AntDesign', 10000),
        renderItem('AntDesign UI', 10600),
      ],
    },
    {
      label: renderTitle('Solutions'),
      options: [
        renderItem('AntDesign UI FAQ', 60100),
        renderItem('AntDesign FAQ', 30010),
      ],
    },
    {
      label: renderTitle('Articles'),
      options: [renderItem('AntDesign design language', 100000)],
    },
  ];

  return (
    <div className={classNames(styles['search'], styles['search_container'])}>
      <AutoComplete
        disabled
        className={classNames(styles['search'])}
        dropdownClassName="certain-category-search-dropdown"
        dropdownMatchSelectWidth={500}
        options={options}
      >
        <SearchAntd
          // className={styles['search_container__input-button']}
          placeholder={translations}
          value="123"
          enterButton={
            <span className={styles['search_container__input-button-title']}>
              Поиск
            </span>
          }
        />
      </AutoComplete>
      {/*<div className={styles['search_container-hint-container']}>*/}
      {/*  {[*/}
      {/*    { title: 'Только СОВ', key: 1 },*/}
      {/*    { title: 'Бухгалтерия', key: 2 },*/}
      {/*    { title: 'Москва', key: 3 },*/}
      {/*    { title: 'Только СОВ', key: 4 },*/}
      {/*    { title: 'Бухгалтерия', key: 5 },*/}
      {/*  ].map((item) => (*/}
      {/*    <Button*/}
      {/*      onClick={() => console.log(item)}*/}
      {/*      className={styles['search_container-hint-container__hint']}*/}
      {/*      key={item.key}*/}
      {/*    >*/}
      {/*      {item.title}*/}
      {/*    </Button>*/}
      {/*  ))}*/}
      {/*</div>*/}

      {/*<div className={styles['search_container__all-query']}>*/}
      {/*  <a href="#">Все сохраненные поисковые запросы</a>*/}
      {/*</div>*/}
    </div>
  );
};

export default Search;
