import React, { useEffect, useMemo } from 'react';

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

import { Select } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
import { useRecoilState } from 'recoil';
import { searchValue } from '../../store/page';

const { Option } = Select;

function LargeScreenComponentSelect(props: ILargeScreenComponentSelect) {
  const {
    value,
    list = [],
    change,
    styles,
    noList,
    layoutList,
    switchIcon
  } = props;

  const [, setInputValue] = useRecoilState(searchValue); //元件列表的input的value

  useEffect(() => {
    setInputValue('');
  }, [value]);

  const Dom = useMemo(() => {
    return (
      <div className="zl-large-screen-component-select" style={{ ...styles }}>
        {Array.isArray(layoutList) &&
          layoutList.length > 0 &&
          layoutList.map((item, index) => {
            if (item === 'select') {
              return (
                <Select
                  style={{
                    width: layoutList?.length > 1 ? 'calc(100% - 31px)' : '100%'
                  }}
                  key={index}
                  value={value}
                  listHeight={260}
                  suffixIcon={
                    <CaretDownOutlined style={{ color: '#5d6773' }} />
                  }
                  onChange={(value) => change?.('selectvalue', value)}
                  dropdownClassName="zl-large-screen-component-select-wrap"
                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  onPopupScroll={(e) => {
                    e.stopPropagation();
                    change?.('selectScroll', e);
                  }}
                  notFoundContent={
                    list?.length <= 0 ? (
                      <span className="zl-large-screen-select-no-data">
                        {noList}
                      </span>
                    ) : (
                      <></>
                    )
                  }
                >
                  {list?.length > 0 &&
                    list?.map((item) => {
                      return (
                        <Option key={item?.key} value={item?.name}>
                          <img
                            className="zl-large-screen-select-img"
                            src={item?.imgUrl}
                            alt={item?.name}
                          />
                          <span>{item?.name}</span>
                        </Option>
                      );
                    })}
                </Select>
              );
            } else if (item === 'switch') {
              return typeof switchIcon === 'string' ? (
                <Icon
                  key={index}
                  name={switchIcon}
                  classname="zl-large-screen-component-search-icon"
                  click={() => change?.('selectIcon', switchIcon)}
                />
              ) : (
                switchIcon
              );
            }
          })}
      </div>
    );
  }, [value, list, styles, switchIcon]);

  return Dom;
}

export default LargeScreenComponentSelect;

export interface ILargeScreenComponentSelect {
  value?: string;
  list?: IList[];
  change?: Function;
  styles?: React.CSSProperties;
  noList?: string;
  layoutList?: string[];
  switchIcon?: string | React.ReactNode;
}

export interface IList {
  key: string;
  name: string;
  imgUrl?: string;
}