import React, { useMemo } from 'react';

import Icon from '../Icon/index';

import { Dropdown, Menu } from 'antd';

function LargeScreenComponentFiltr(props: ILargeScreenComponentFiltr) {
  const {
    filterList = [],
    list = [],
    showAll = '',
    change,
    styles,
    menuList,
    value
  } = props;

  const clickFilter = (value, type) => {
    change?.(value, type);
  };

  const menu = () => {
    return (
      <Menu
        items={menuList}
        selectedKeys={[value]}
        onClick={(key) => {
          clickFilter(key, 'menuClick');
        }}
      />
    );
  };

  const Dom = useMemo(() => {
    return (
      <div className="zl-large-screen-component-filtr" style={{ ...styles }}>
        {list?.length > 0 &&
          list?.map((item, index) => {
            if (item === 'filter') {
              return (
                <span
                  key={index}
                  className="zl-large-screen-component-filtr-span"
                >
                  <Dropdown
                    trigger="click"
                    overlay={menu}
                    placement="bottom"
                    overlayClassName="zl-large-screen-component-filtr-dropdown"
                  >
                    <span>
                    {value}
                      <Icon
                        name="icon-_select-single_arrow_down"
                        classname="zl-large-screen-filter-icon"
                      />
                    </span>
                  </Dropdown>
                </span>
              );
            } else if (item === 'collapse') {
              return (
                <span
                  key={index}
                  className="zl-large-screen-component-filtr-all"
                  onClick={() => {
                    clickFilter(showAll, 'collapse');
                  }}
                >
                  {showAll}
                </span>
              );
            }
          })}
      </div>
    );
  }, [filterList, list, showAll, styles, value]);

  return Dom;
}

export default LargeScreenComponentFiltr;

export interface ILargeScreenComponentFiltr {
  filterList?: IFilterList[];
  list?: string[];
  showAll?: string;
  change?: Function;
  styles?: React.CSSProperties;
  menuList?: IMenuList[];
  value?: string;
}

export interface IMenuList {
  label: string;
  key: string;
}

export interface IFilterList {
  type?: string;
  selected?: string[];
  options?: string[];
}