import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import { CommonThemeProps } from '../types';
import { DatePicker2 as NextDatePicker2 } from '@alifd/next';
import { DatePickerProps as NextDatePicker2Props } from '@alifd/next/types/date-picker2';
import { RangePickerProps as NextRangePicker2Props } from '@alifd/next/types/date-picker2';
import { getTheme } from '../utils/getTheme';

interface DatePicker2Props extends NextDatePicker2Props, CommonThemeProps{}
interface RangePicker2Props extends NextRangePicker2Props, CommonThemeProps{}

class BdesignRangePicker extends Component<RangePicker2Props> {

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

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

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

    const { RangePicker } = NextDatePicker2;
    return (
      <RangePicker
        {...otherProps}
        prefix={prefix}
        popupAlign={popupAlign}
        popupClassName={`${prefix}${theme} ${popupClassName}`}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}
class BdesignMonthPicker extends Component<DatePicker2Props> {

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

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

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

    const { MonthPicker } = NextDatePicker2;

    return (
      <MonthPicker
        {...otherProps}
        prefix={prefix}
        popupAlign={popupAlign}
        popupClassName={`${prefix}${theme} ${popupClassName}`}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}
class BdesignYearPicker extends Component<DatePicker2Props> {

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

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

    const { YearPicker } = NextDatePicker2;

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

    return (
      <YearPicker
        {...otherProps}
        prefix={prefix}
        popupAlign={popupAlign}
        popupClassName={`${prefix}${theme} ${popupClassName}`}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}
class BdesignWeekPicker extends Component<DatePicker2Props> {

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

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

    const { WeekPicker } = NextDatePicker2;

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

    return (
      <WeekPicker
        {...otherProps}
        prefix={prefix}
        popupAlign={popupAlign}
        popupClassName={`${prefix}${theme} ${popupClassName}`}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}
class BdesignQuarterPicker extends Component<DatePicker2Props> {

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

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

    const { QuarterPicker } = NextDatePicker2;

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

    return (
      <QuarterPicker
        {...otherProps}
        prefix={prefix}
        popupAlign={popupAlign}
        popupClassName={`${prefix}${theme} ${popupClassName}`}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}
class DatePicker2 extends Component<DatePicker2Props> {
  static RangePicker = ConfigProvider.config(BdesignRangePicker);
  static MonthPicker = ConfigProvider.config(BdesignMonthPicker);
  static YearPicker = ConfigProvider.config(BdesignYearPicker);
  static WeekPicker = ConfigProvider.config(BdesignWeekPicker);
  static QuarterPicker = ConfigProvider.config(BdesignQuarterPicker);

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

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

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

    return (
      <NextDatePicker2
        {...otherProps}
        prefix={prefix}
        popupAlign={popupAlign}
        popupClassName={`${prefix}${theme} ${popupClassName}`}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}
export default ConfigProvider.config(DatePicker2);