import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import { CommonThemeProps } from '../types';
import { CloseableProps as NextCloseableProps } from '@alifd/next/types/tag';
import { SelectableProps as NextSelectableProps } from '@alifd/next/types/tag';
import { Tag as NextTag } from '@alifd/next';
import { TagProps as NextTagProps } from '@alifd/next/types/tag';
import { getTheme } from '../utils/getTheme';
import { omitProps } from '../utils/object';

interface CloseableProps extends Omit<NextCloseableProps, 'size'>, CommonThemeProps {
  size?: 'large' | 'medium' | 'small' | 'xs';
}
class Closeable extends Component<CloseableProps> {

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

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

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

    if (size === 'xs') {
      return (
        <NextTag.Closeable
          {...omitProps(otherProps, [ 'size' ])}
          prefix={prefix}
          className={cls(className, {
            [`${prefix}grey`]: theme === 'grey',
            [`${prefix}white`]: theme === 'white',
            [`${prefix}tag-xs`]: size === 'xs',
          })}
        />
      );
    }
    return (
      <NextTag.Closeable
        {...otherProps}
        prefix={prefix}
        size={size as 'large' | 'medium' | 'small'}
        className={cls(className, {
          [`${prefix}grey`]: theme === 'grey',
          [`${prefix}white`]: theme === 'white',
        })}
      />
    );
  }
}
interface SelectableProps extends Omit<NextSelectableProps, 'size'>, CommonThemeProps {
  size?: 'large' | 'medium' | 'small' | 'xs';
}
class Selectable extends Component<SelectableProps> {

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

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

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

    if (size === 'xs') {
      return (
        <NextTag.Selectable
          {...omitProps(otherProps, [ 'size' ])}
          prefix={prefix}
          className={cls(className, {
            [`${prefix}grey`]: theme === 'grey',
            [`${prefix}white`]: theme === 'white',
            [`${prefix}tag-xs`]: size === 'xs',
          })}
        />
      );
    }
    return (
      <NextTag.Selectable
        {...otherProps}
        prefix={prefix}
        size={size as 'large' | 'medium' | 'small'}
        className={cls(className, {
          [`${prefix}grey`]: theme === 'grey',
          [`${prefix}white`]: theme === 'white',

        })}
      />
    );
  }
}
interface TagProps extends Omit<NextTagProps, 'size'>, CommonThemeProps {
  size?: 'large' | 'medium' | 'small' | 'xs';
}
class Tag extends Component<TagProps> {
  static Group = NextTag.Group;
  static Closeable = ConfigProvider.config(Closeable);
  static Selectable = ConfigProvider.config(Selectable);

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

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

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

    if (size === 'xs') {
      return (
        <NextTag
          {...omitProps(otherProps, [ 'size' ])}
          prefix={prefix}
          className={cls(className, {
            [`${prefix}grey`]: theme === 'grey',
            [`${prefix}white`]: theme === 'white',
            [`${prefix}tag-xs`]: size === 'xs',
            [`${prefix}${color}`]: color,
          })}
        />
      );
    }
    return (
      <NextTag
        {...otherProps}
        prefix={prefix}
        size={size as 'large' | 'medium' | 'small'}
        className={cls(className, {
          [`${prefix}grey`]: theme === 'grey',
          [`${prefix}white`]: theme === 'white',
          [`${prefix}${color}`]: color,
        })}
      />
    );
  }
}
export default ConfigProvider.config(Tag);