import './demo14.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '..';
import classNames from 'classnames';
/* eslint-disable react/prop-types, react/no-multi-comp */

// prevent onBlur
function preventDefault(e) {
  e.preventDefault();
}
interface PageProps {
  onChange: (item: any) => void;
  onMouseDown: (e) => void;
  className: string;
}
class CustomMenu extends React.Component<PageProps, {}> {
  data: { label: string; value: number }[];
  constructor(props) {
    super(props);
    this.data = [
      {
        label: 'value1',
        value: 1,
      },
      {
        label: 'value2',
        value: 2,
      },
    ];
  }
  onClick(item) {
    this.props.onChange(item);
  }

  renderItems() {
    return this.data.map(item => (
      <li onClick={this.onClick.bind(this, item)} key={item.value}>
        {item.label}
      </li>
    ));
  }

  render() {
    const { className, ...others } = this.props;
    const cls = classNames('overlay-content', className);

    return (
      <ul className={cls} {...others}>
        {this.renderItems()}
      </ul>
    );
  }
}
interface PageStates {
  value: any;
  visible: boolean;
}
class Demo extends React.Component<{}, PageStates> {
  handleSelect: (value: any) => void;
  onVisibleChange: (visible: any) => void;
  constructor(props) {
    super(props);

    this.handleSelect = value => {
      this.setState({
        value,
        visible: false,
      });
    };
    this.onVisibleChange = visible => {
      this.setState({
        visible,
      });
    };
    this.state = {
      value: null,
      visible: false,
    };
  }

  render() {
    const popupContent = (
      <div style={{ border: '1px solid', background: 'white' }}>
        <div
          style={{
            borderBottom: '1px solid',
            background: 'white',
            padding: 10,
            fontSize: '12px',
          }}
        >
          custom header
        </div>
        <CustomMenu
          className=""
          onChange={this.handleSelect}
          onMouseDown={preventDefault}
        />
        <div
          style={{
            borderTop: '1px solid',
            background: 'white',
            padding: 10,
            fontSize: '12px',
          }}
        >
          custom footer
        </div>
      </div>
    );
    const popupProps = {
      triggerClickKeycode: [ 13, 32, 40 ], // space, enter, down-arrow
    };

    return (
      <div className="demo-container">
        <Select
          placeholder="custom popupContent"
          visible={this.state.visible}
          onVisibleChange={this.onVisibleChange}
          value={this.state.value}
          popupProps={popupProps}
          popupContent={popupContent}
          style={{ width: 200 }}
        />
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('select-demo-14'));