// import { Input } from "@alifd/next";
import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import { CommonThemeProps } from '../types';
import { GroupProps as NextGroupProps } from '@alifd/next/types/input';
import { Input as NextInput } from '@alifd/next';
import { InputProps as NextInputProps } from '@alifd/next/types/input';
import { PasswordProps as NextPasswordProps } from '@alifd/next/types/input';
import { TextAreaProps as NextTextAreaProps } from '@alifd/next/types/input';
import { getTheme } from '../utils/getTheme';
import { omitProps } from '../utils/object';


interface TextAreaProps extends NextTextAreaProps, CommonThemeProps { }
class TextArea extends Component<TextAreaProps, any> {
  // contextTypes
  static contextTypes = {
    theme: PropTypes.string,
  };

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

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

    return (
      <NextInput.TextArea
        {...otherProps}
        prefix={prefix}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      />
    );
  }
}
interface PasswordProps extends Omit<NextPasswordProps, 'size'>, CommonThemeProps {
  size?: 'large' | 'medium' | 'small' | 'xs';
}
class Password extends Component<PasswordProps, any> {
  // contextTypes
  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 (
        <NextInput.Password
          {...omitProps(otherProps, [ 'size' ])}
          prefix={prefix}
          className={cls(className, {
            [`${prefix}grey`]: theme === 'grey',
            [`${prefix}xs`]: size === 'xs',
            [`${prefix}white`]: theme === 'white',
          })}
        />
      );
    }
    return (
      <NextInput.Password
        {...otherProps}
        prefix={prefix}
        size={size as 'large' | 'medium' | 'small'}
        className={cls(className, {
          [`${prefix}grey`]: theme === 'grey',
          [`${prefix}white`]: theme === 'white',
        })}
      />
    );
  }
}
interface GroupProps extends NextGroupProps, CommonThemeProps {
}
class Group extends Component<GroupProps, any> {
  // contextTypes
  static contextTypes = {
    theme: PropTypes.string,
  };

  render() {

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

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

    return (
      <NextInput.Group
        {...otherProps}
        prefix={prefix}
        className={cls(className, {
          [`${prefix}grey`]: theme === 'grey',
          [`${prefix}white`]: theme === 'white',
        })}
      />
    );
  }
}
interface InputProps extends Omit<NextInputProps, 'size'>, CommonThemeProps {
  size?: 'large' | 'medium' | 'small' | 'xs';
}
class Input extends Component<InputProps> {
  static TextArea = ConfigProvider.config(TextArea);
  static Group = ConfigProvider.config(Group);
  static Password = ConfigProvider.config(Password);

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

  render() {

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

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

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