import React from 'react';
import { style } from 'app/styles';

// import { SearchInput } from 'app/components/SearchInput';
import { SearchIcon } from 'app/components/SearchIcon';
import { SearchInput } from 'app/components/SearchInput';

export interface SearchToggleProps {
  value: string;
  onChange: (value) => void;
  placeholder?: string;
  style?: object;
}

const initialState = {
  showSearchInput: false,
};

type SearchToggleState = Readonly<typeof initialState>;

const iconStyle = {
  _extends: ['selectable'],
  width: 25,
  height: 23,
  textAlign: 'center',
  paddingTop: 6,
  marginRight: 12,
};

export class SearchToggle extends React.Component<
  SearchToggleProps,
  SearchToggleState
> {
  readonly state: SearchToggleState = initialState;

  render() {
    const { value, onChange } = this.props;
    if (
      (value && value.toString().trim() !== '') ||
      this.state.showSearchInput
    ) {
      return (
        <SearchInput
          value={value}
          onChange={onChange}
          onClear={this.onClose}
          style={style(this.props.style)}
        />
      );
    }
    return (
      <div
        style={style(iconStyle, this.props.style, {
          width: iconStyle.width,
        })}
        onClick={this.onIconClick}
      >
        <SearchIcon width={16} height={16} />
      </div>
    );
  }
  onIconClick = () => {
    this.setState({ showSearchInput: true });
  };

  onClose = () => {
    this.setState({ showSearchInput: false });
    this.props.onChange('');
  };
}