import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { CommonThemeProps } from '../types';
import { NumberPicker as NextNumberPicker } from '@alifd/next';
import { NumberPickerProps as NextNumberPickerProps } from '@alifd/next/types/number-picker';
import { getTheme } from '../utils/getTheme';

interface NumberPickerProps
  extends NextNumberPickerProps,
  CommonThemeProps {
  state?: 'error' | 'loading' | 'success' | 'warning';
}

class NumberPicker extends Component<NumberPickerProps> {

  onFocus = e => {
    const { onFocus, prefix = 'next-' } = this.props;
    const dom = e.target;
    dom.parentNode.parentElement.classList.add(`${prefix}input-group-focus`);
    onFocus && onFocus(e);
  };
  onBlur = e => {
    const { onBlur, prefix = 'next-' } = this.props;
    const dom = e.target;
    dom.parentNode.parentElement.classList.remove(`${prefix}input-group-focus`);
    onBlur && onBlur(e);
  };

  // contextTypes
  static contextTypes = {
    theme: PropTypes.string,
  };

  render() {
    const { type } = this.props;
    const { prefix = 'next-', className, ...otherProps } = this.props;
    // const state = this.props.state ? this.props.state : '';
    const { state } = this.props;

    const theme = getTheme(this.context, this.props);

    // inline 模式
    if (type === 'inline' && state === 'error') {
      return (
        <NextNumberPicker
          {...otherProps}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          prefix={prefix}
          className={cls(className, {
            [`${prefix}number-picker-error`]: true,
            [`${prefix}white`]: theme === 'white',
            [`${prefix}grey`]: theme === 'grey',
          })}
        />
      );

    }
    return (
      <NextNumberPicker
        {...otherProps}
        onFocus={this.onFocus}
        onBlur={this.onBlur}
        prefix={prefix}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}
hoistNonReactStatics(NumberPicker, NextNumberPicker);
export default ConfigProvider.config(NumberPicker);