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 { TimePicker2 as NextTimePicker2 } from '@alifd/next';
import { TimePickerProps as NextTimePickerProps } from '@alifd/next/types/time-picker2';
import { getTheme } from '../utils/getTheme';


interface TimePickerProps extends NextTimePickerProps, CommonThemeProps {}

class TimePicker2 extends Component<TimePickerProps> {

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

  render() {

    const {
      prefix = 'next-',
      className,
      popupAlign = 'bl tl',
      ...otherProps
    } = this.props;

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

    return (
      <NextTimePicker2
        {...otherProps}
        prefix={prefix}
        popupAlign={popupAlign}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
        popupClassName={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}

hoistNonReactStatics(TimePicker2, NextTimePicker2);

export default ConfigProvider.config(TimePicker2);