import React, { Component } from 'react';
import { Input, ConfigProvider } from '@easyv/react-gui';
import styles from './UserListHeader.less';
import PanelHeaderContainer from 'components/PanelHeaderContainer';
import EasyvButton from 'components/EasyvButton';

const { Search } = Input;

interface IProps {
  onSearch: Function;
  onCreate: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  search: string;
}

class UserListHeader extends Component<IProps> {
  onChange = (e) => {
    this.props.onSearch(e.target.value);
  };

  render() {
    const { search } = this.props;
    return (
      <PanelHeaderContainer>
        <EasyvButton theme="primary" onClick={this.props.onCreate}>
          创建账户
        </EasyvButton>
        <div>
          <ConfigProvider>
            <Search className={styles.searchInput} placeholder="账户搜索" value={search} style={{ width: 210 }} onChange={this.onChange} />
          </ConfigProvider>
        </div>
      </PanelHeaderContainer>
    );
  }
}

export default UserListHeader;
