import React from 'react';
import classnames from 'classnames';

import { ConfigConsumer } from '../config-provider';
import Input from '../input';
import Icons from '../icons';
import Button from '../button';

const { SearchIcon, LoadingIcon } = Icons;

class Search extends React.Component {
  static defaultProps = {
    enterButton: false,
  };

  // input = React.createRef();
  saveInput = node => {
    this.input = node;
  };

  focus = () => {
    this.input.focus();
  };

  blur = () => {
    this.input.blur();
  };

  onChange = e => {
    const { onChange, onSearch } = this.props;
    if (e && e.target && e.type === 'click' && onSearch) {
      onSearch(e.target.value, e);
    }
    if (onChange) {
      onChange(e);
    }
  };

  onSearch = e => {
    const { onSearch, loading, disabled } = this.props;
    if (loading || disabled) {
      return;
    }
    if (onSearch) {
      onSearch(this.input.input.value, e);
    }
  };

  onMouseDown = e => {
    if (document.activeElement === this.input.input) {
      e.preventDefault();
    }
  };

  renderLoading = prefixCls => {
    const { enterButton, size } = this.props;

    if (enterButton) {
      return (
        <Button
          className={`${prefixCls}-button`}
          type="primary"
          size={size}
          key="enterButton"
        >
          <LoadingIcon fill="currentColor" />
        </Button>
      );
    }
    return <LoadingIcon key="loadingIcon" />;
  };

  renderAddonAfter = (prefixCls, size) => {
    const { enterButton, disabled, addonAfter, loading } = this.props;
    const btnClassName = `${prefixCls}-button`;
    if (loading && enterButton) {
      return [this.renderLoading(prefixCls), addonAfter];
    }
    if (!enterButton) return addonAfter;
    let button = (
      <Button
        className={btnClassName}
        type="primary"
        size={size}
        disabled={disabled}
        key="enterButton"
        onMouseDown={this.onMouseDown}
        onClick={this.onSearch}
      >
        {enterButton === true ? (
          <SearchIcon fill="currentColor" />
        ) : (
          enterButton
        )}
      </Button>
    );
    if (addonAfter) {
      return [
        button,
        React.isValidElement(addonAfter)
          ? React.cloneElement(addonAfter, {
              key: 'addonAfter',
            })
          : null,
      ];
    }

    return button;
  };

  renderSuffix = prefixCls => {
    const { suffix, enterButton, loading } = this.props;

    if (loading && !enterButton) {
      return [suffix, this.renderLoading(prefixCls)];
    }

    if (enterButton) return suffix;

    const icon = (
      <span onClick={this.onSearch}>
        <SearchIcon key="searchIcon" className={`${prefixCls}-icon`} />
      </span>
    );

    if (suffix) {
      return [
        React.isValidElement(suffix)
          ? React.cloneElement(suffix, {
              key: 'suffix',
            })
          : null,
        icon,
      ];
    }

    return icon;
  };

  renderSearch = ({ getPrefixCls, direction }) => {
    const {
      prefixCls: customizePrefixCls,
      inputPrefixCls: customizeInputPrefixCls,
      enterButton,
      size,
      className,
      ...restProps
    } = this.props;

    delete restProps.onSearch;
    delete restProps.loading;

    const prefixCls = getPrefixCls('input-search', customizePrefixCls);
    const inputPrefixCls = getPrefixCls('input', customizePrefixCls);
    const getClassName = () => {
      let inputClassName;
      if (enterButton) {
        inputClassName = classnames(prefixCls, className, {
          [`${prefixCls}-rtl`]: direction === 'rtl',
          [`${prefixCls}-enter-button`]: !!enterButton,
          [`${prefixCls}-${size}`]: !!size,
        });
      } else {
        inputClassName = classnames(prefixCls, className, {
          [`${prefixCls}-rtl`]: direction === 'rtl',
        });
      }
      return inputClassName;
    };
    return (
      <Input
        {...restProps}
        onPressEnter={this.onSearch}
        prefixCls={inputPrefixCls}
        size={size}
        ref={this.saveInput}
        addonAfter={this.renderAddonAfter(prefixCls, size)}
        suffix={this.renderSuffix(prefixCls)}
        onChange={this.onChange}
        className={getClassName()}
      />
    );
  };

  render() {
    return <ConfigConsumer>{this.renderSearch}</ConfigConsumer>;
  }
}

export default Search;