import React, { useRef } from 'react';

import { AutoComplete, Input } from 'antd';
import classNames from 'classnames';
import PropType from 'prop-types';
import useMergeValue from 'use-merge-value';

import { SearchOutlined } from '@ant-design/icons';

import styles from './index.less';

const HeaderSearch = props => {
  const {
    className,
    defaultValue,
    onVisibleChange,
    placeholder,
    open,
    defaultOpen,
    filterOption,
    ...restProps
  } = props;

  const inputRef = useRef(null);

  const [value, setValue] = useMergeValue(defaultValue, {
    value: props.value,
    onChange: props.onChange,
  });

  const [searchMode, setSearchMode] = useMergeValue(defaultOpen || false, {
    value: props.open,
    onChange: onVisibleChange,
  });

  const inputClass = classNames(styles.input, {
    [styles.show]: searchMode,
  });

  return (
    <div
      className={classNames(className, styles.headerSearch)}
      onClick={() => {
        setSearchMode(true);
        setValue('');
        if (searchMode && inputRef.current) {
          inputRef.current.focus();
        }
      }}
      onTransitionEnd={({ propertyName }) => {
        if (propertyName === 'width' && !searchMode) {
          if (onVisibleChange) {
            onVisibleChange(searchMode);
          }
        }
      }}
    >
      <SearchOutlined
        key="Icon"
        style={{
          cursor: 'pointer',
        }}
      />
      <AutoComplete
        key="AutoComplete"
        className={inputClass}
        value={value}
        style={{
          height: 28,
          marginTop: -6,
        }}
        filterOption={filterOption}
        options={restProps.options}
        onChange={setValue}
      >
        <Input
          ref={inputRef}
          defaultValue={defaultValue}
          aria-label={placeholder}
          placeholder={placeholder}
          onKeyDown={e => {
            if (e.key === 'Enter') {
              if (restProps.onSearch) {
                restProps.onSearch(value);
              }
            }
          }}
          onBlur={() => {
            setSearchMode(false);
          }}
        />
      </AutoComplete>
    </div>
  );
};

HeaderSearch.propTypes = {
  onSearch: PropType.func,
  onChange: PropType.func,
  onVisibleChange: PropType.func,
  className: PropType.string,
  placeholder: PropType.string,
  options: PropType.array,
  defaultOpen: PropType.bool,
  open: PropType.bool,
  defaultValue: PropType.string,
  value: PropType.string,
};
export default HeaderSearch;