// import { Input } from "@alifd/next";
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 { omitProps } from '../utils/object';


interface TextAreaProps extends NextTextAreaProps, CommonThemeProps {}
class TextArea extends React.Component<TextAreaProps, any> {
  render() {
    const { prefix = 'next-', theme = 'white', className, ...otherProps } = 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'>{
  size?: 'large' | 'medium' | 'small' | 'xs';
  theme?: 'white' | 'grey';
}
class Password extends React.Component<PasswordProps, any> {
  render() {
    const { prefix = 'next-', theme = 'white', size = 'medium', className, ...otherProps } = 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{
  theme?: 'white' | 'grey';
}
class Group extends React.Component<GroupProps, any> {
  render() {
    const { prefix = 'next-', theme = 'white', className, ...otherProps } = 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'>{
  size?: 'large' | 'medium' | 'small' | 'xs';
  theme?: 'white' | 'grey';
}
class Input extends Component<InputProps> {
  static TextArea = TextArea;
  static Group = Group;
  static Password = Password;
  render() {
    const { prefix = 'next-', theme = 'white', size = 'medium', className, ...otherProps } = 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 Input;
