import React, { useState, useRef, useEffect } from 'react';

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

import { ISearchInputProps } from '../../type/LargeScreenElement';
import { Input } from 'antd';
import { useRecoilState } from 'recoil';
import { searchValue } from '../../store/page';

import './style.scss';

const SearchInput: React.FC<ISearchInputProps> = (props) => {
  const { change } = props;

  const [closeShow, setCloseShow] = useState(false);
  const [inputValue, setInputValue] = useRecoilState(searchValue); //input的value

  const _changeSearch = (value: string, type: string) => {
    if (!value) {
      setCloseShow(false);
    } else {
      setCloseShow(true);
    }
    setInputValue(value);
    change?.(value, type);
  };

  return (
    <div className="zl-ls-unit-search-input">
      <Input
        size="small"
        value={inputValue}
        placeholder="搜索"
        prefix={<Icon name="icon-_search" style={{ marginRight: 4 }} />}
        onChange={(e) => _changeSearch(e.target.value, 'change')}
        onBlur={(e) => {
          _changeSearch(e.target.value, 'blur');
        }}
        onPressEnter={(e) => {
          e.preventDefault();
          e.stopPropagation();
          _changeSearch(e.target.value, 'blur');
        }}
      />
      <Icon
        classname="icon-delete-filling"
        click={() => {
          change?.('', 'change');
          setInputValue('');
          setCloseShow(false);
        }}
        name="icon-delete-filling"
        style={{
          cursor: 'pointer',
          visibility: closeShow ? 'visible' : 'hidden',
          color: 'var(--color-font)',
          marginLeft: 4
        }}
      />
    </div>
  );
};
export default SearchInput;