import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import { CommonThemeProps } from '../types';
import { DatePicker as NextDatePicker } from '@alifd/next';
import { DatePickerProps as NextDatePickerProps } from '@alifd/next/types/date-picker';
import { MonthPickerProps as NextMonthPickerProps } from '@alifd/next/types/date-picker';
import { RangePickerProps as NextRangePickerProps } from '@alifd/next/types/date-picker';
import { YearPickerProps as NextYearPickerProps } from '@alifd/next/types/date-picker';
import { getTheme } from '../utils/getTheme';


interface DatePickerProps extends NextDatePickerProps, CommonThemeProps{}
interface RangePickerProps extends NextRangePickerProps, CommonThemeProps {}
interface MonthPickerProps extends NextMonthPickerProps, CommonThemeProps {}
interface YearPickerProps extends NextYearPickerProps, CommonThemeProps {}

class BdesignRangePicker extends Component<RangePickerProps> {

  onFocus = (e: any) => {
    const { prefix = 'next-' } = this.props;
    const dom = e.target;
    dom.parentNode.parentElement.classList.add(`${prefix}range-date-picker-focus`);
    if (this.props.onFocus) {
      return this.onFocus(e) && this.props.onFocus;
    }
  };
  onBlur = (e: any) => {
    const { prefix = 'next-' } = this.props;
    const dom = e.target;
    dom.parentNode.parentElement.classList.remove(
      `${prefix}range-date-picker-focus`,
    );
    if (this.props.onBlur) {
      return this.onBlur(e) && this.props.onBlur;
    }
  };

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

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

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

    const { RangePicker } = NextDatePicker;
    return (
      <RangePicker
        {...otherProps}
        size={size}
        prefix={prefix}
        onFocus={this.onFocus}
        onBlur={this.onBlur}
        popupClassName={`${prefix}${theme} ${popupClassName}`}
        popupAlign={popupAlign}
        className={cls(className, {
          [`${prefix}small`]: size === 'small',
          [`${prefix}medium`]: size === 'medium',
          [`${prefix}large`]: size === 'large',
          [`${prefix}grey`]: theme === 'grey',
          [`${prefix}white`]: theme === 'white',
        })}
      />
    );
  }
}
class BdesignMonthPicker extends Component<MonthPickerProps> {

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

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

    const { MonthPicker } = NextDatePicker;

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

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

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

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

    const { YearPicker } = NextDatePicker;

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

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

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

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

    const { WeekPicker } = NextDatePicker;

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

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

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

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

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

    return (
      <NextDatePicker
        {...otherProps}
        size={size}
        prefix={prefix}
        popupAlign={popupAlign}
        popupClassName={`${prefix}${theme} ${popupClassName}`}
        className={cls(className, {
          [`${prefix}small`]: size === 'small',
          [`${prefix}medium`]: size === 'medium',
          [`${prefix}large`]: size === 'large',
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}
export default ConfigProvider.config(DatePicker);