import React, { useState } from 'react';
import { Input } from 'antd';
import classnames from 'classnames';
import Icon from '../Icon/Icon';
import { SeniorSearchRefProps } from './SeniorSearch';
import useConfig from './../../use/useConfig';
import style from './search.module.scss';

interface IProps {
  onSearch(str: string): void;
  seniorSearchRef?: React.RefObject<SeniorSearchRefProps> | null
  placeholder?: string
}

const Search = ({ placeholder, onSearch, seniorSearchRef }: IProps) => {
  const config = useConfig();
  const [value, setValue] = useState('');
  const [disabled, setDisabled] = useState(false);

  function onChange(e: React.BaseSyntheticEvent) {
    setValue(e.target.value)
  }

  function _onSearch() {
    if (!disabled) onSearch(value.trim())
  }

  function onKeyDown(e: React.KeyboardEvent) {
    if (e.keyCode === 13) _onSearch();
  }

  function toggle() {
    setDisabled(seniorSearchRef?.current?.toggle() || false)
  }

  const iconCls = classnames(
    style.icon,
    {
      [style.notAllowed]: disabled
    }
  )

  return (
    <Input
      className={style.box}
      disabled={disabled}
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      onKeyDown={onKeyDown}
      suffix={
        <Icon
          className={iconCls}
          onClick={_onSearch}
          icon='iconSearch' />
      }
      addonAfter={
        seniorSearchRef && (
          <span
            onClick={toggle}
            className={style.btn}>
            {config.local?.senior}
          </span>
        )
      } />
  )
}

export default Search;