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 { Radio as NextRadio } from '@alifd/next';
import { RadioProps as NextRadioProps } from '@alifd/next/types/radio';
import { GroupProps as RadioGroupProps } from '@alifd/next/types/radio';
import { getTheme } from '../utils/getTheme';
import { omitProps } from '../utils/object';

interface RadioProps extends NextRadioProps {
  size?: 'xl' | 'large' | 'medium' | 'small';
}
interface GroupProps extends Omit<RadioGroupProps, 'size'>, CommonThemeProps {
  size?: 'xl' | 'large' | 'medium' | 'small' | 'xs';
  type?: 'outline' | 'container' | 'solid'
}
class BdesignGroup extends Component<GroupProps> {

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

  render() {
    const { shape } = this.props;
    const { prefix = 'next-', size = 'medium', className, ...otherProps } = this.props;
    // button形状的radio

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

    if (shape === 'button') {
      const { type = 'outline', size } = this.props;
      if (size === 'xs') {
        return (
          <NextRadio.Group
            {...omitProps(otherProps, [ 'size' ])}
            prefix={prefix}
            className={cls(className, {
              [`${prefix}grey`]: theme === 'grey',
              [`${prefix}white`]: theme === 'white',
              [`${prefix}xs`]: size === 'xs',
              [`${prefix}outline`]: type === 'outline',
              [`${prefix}solid`]: type === 'solid',
              [`${prefix}container`]: type === 'container',

            })}
          />
        );
      }
      return (
        <NextRadio.Group
          {...otherProps}
          prefix={prefix}
          size={size as 'large' | 'medium' | 'small'}
          className={cls(className, {
            [`${prefix}grey`]: theme === 'grey',
            [`${prefix}white`]: theme === 'white',
            [`${prefix}large`]: size === 'large',
            [`${prefix}medium`]: size === 'medium',
            [`${prefix}small`]: size === 'small',
            [`${prefix}outline`]: type === 'outline',
            [`${prefix}solid`]: type === 'solid',
            [`${prefix}container`]: type === 'container',
          })}
        />
      );
    }
    return (
      <NextRadio.Group
        {...otherProps}
        prefix={prefix}
        className={cls(className, {
          [`${prefix}xl`]: size === 'xl',
          [`${prefix}large`]: size === 'large',
          [`${prefix}medium`]: size === 'medium',
          [`${prefix}small`]: size === 'small',
        })}
      />
    );
  }
}
class Radio extends Component<RadioProps> {
  static Group = ConfigProvider.config(BdesignGroup);

  render() {
    const { size = 'medium', prefix = 'next-', className, ...otherProps } = this.props;
    return (
      <NextRadio
        {...otherProps}
        prefix={prefix}
        className={cls(className, {
          [`${prefix}xl`]: size === 'xl',
          [`${prefix}large`]: size === 'large',
          [`${prefix}medium`]: size === 'medium',
          [`${prefix}small`]: size === 'small',
        })}
      />
    );
  }
}

// hoistNonReactStatics(Radio, NextRadio);

export default ConfigProvider.config(Radio);