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

import Icon from '../Icon/index';
import { Input } from 'antd';

const LargeScreenComponentSearch: React.FC<ILargeScreenComponentSearch> = (
  props
) => {
  const {
    switchIcon,
    list = [],
    change,
    placeholder = '搜索',
    value = '',
    tabsUpdate,
    styles,
    selectUpdate,
    searchUpdate
  } = props;
  const [inputValue, setInputValue] = useState(value); //Input的value
  const [closeShow, setCloseShow] = useState(false);

  //如果tabs切换的值，变了 input的value 变空
  useEffect(() => {
    setInputValue('');
  }, [tabsUpdate, selectUpdate, searchUpdate]);

  //input的事件
  const changeSearch = (value: string, type: string) => {
    if (value) {
      setCloseShow(true);
    } else {
      setCloseShow(false);
    }
    setInputValue(value);
    change?.(value, type);
  };

  const iconClickInput = () => {
    change?.('', 'clear');
    setInputValue('');
    setCloseShow(false);
  };
  //icon的点击事件
  const iconClick = () => {
    change?.(switchIcon, 'iconClick');
  };

  const Dom = useMemo(() => {
    return (
      <div className="zl-large-screen-component-search" style={{ ...styles }}>
        {list?.length > 0 &&
          list?.map((item, index) => {
            if (item === 'search') {
              return (
                <div className="zl-large-screen-component-input" key={index}>
                  <Input
                    value={inputValue}
                    placeholder={placeholder}
                    prefix={
                      <Icon
                        name="icon-_search"
                        style={{ width: 14, height: 14 }}
                      />
                    }
                    onChange={(e) => changeSearch(e.target.value, 'change')}
                    onBlur={(e) => changeSearch(e.target.value, 'blur')}
                  />
                  <Icon
                    click={iconClickInput}
                    name="icon-delete-filling"
                    classname="zl-large-screen-no-value"
                    // style={{ cursor: 'pointer', color: '#000', marginLeft: 4 }}
                    style={{
                      cursor: 'pointer',
                      visibility: closeShow ? 'visible' : 'hidden',
                      marginLeft: 4
                    }}
                  />
                </div>
              );
            } else if (item === 'switch') {
              return typeof switchIcon === 'string' ? (
                <Icon
                  key={index}
                  name={switchIcon}
                  classname="zl-large-screen-component-search-icon"
                  click={() => iconClick()}
                />
              ) : (
                switchIcon
              );
            }
          })}
      </div>
    );
  }, [switchIcon, list, placeholder, value, inputValue, styles]);
  return Dom;
};

export default LargeScreenComponentSearch;

export interface ILargeScreenComponentSearch {
  switchIcon?: string | ReactNode;
  list?: string[] | number[];
  placeholder?: string;
  change?: Function;
  value?: string;
  tabsUpdate?: string | number | boolean;
  styles?: React.CSSProperties;
  selectUpdate?: string;
  searchUpdate?: string;
}