import * as React from 'react';
import classNames from 'classnames';
import { Popup } from '../popup';
import Hammer from 'react-hammerjs';
const prefix = 'tsp-component-Picker';

function view(self: any): JSX.Element {
  return (
    <div className={classNames({
        [self.props.className]: self.props.className,
        [`${prefix}-disabled`]: self.props.disabled
      })}
    >
      <Hammer onTap={self.onOpen}>
        <div className={`${prefix}-label`} ref="label" />
      </Hammer>
      <Popup
        id={self.props.id}
        ref="container"
        onClose={self.onCancel}
      >
        <div className={prefix}>
          <div className={`${prefix}-head`}>
            <Hammer onTap={self.onCancel}>
              <div className={`${prefix}-action`}>取消</div>
            </Hammer>
            <Hammer onTap={self.onOk}>
              <div className={`${prefix}-action`}>确定</div>
            </Hammer>
          </div>
          <Hammer
            className={`${prefix}-body`}
            onPanStart={self.onPanStart}
            onPan={self.onPan}
            onPanEnd={self.onPanEnd}
            direction="DIRECTION_VERTICAL"
          >
            <div className={`${prefix}-body-slider`} ref="slider" />
          </Hammer>
        </div>
      </Popup>
    </div>
  );
}


export default view;