import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Checkbox as NextCheckbox } from '@alifd/next';
import { CheckboxProps as NextCheckboxProps } from '@alifd/next/types/checkbox';

interface CheckboxProps extends NextCheckboxProps {
  size?: 'xl' | 'large' | 'medium' | 'small';
}

class Checkbox extends Component<CheckboxProps> {
  static Group = NextCheckbox.Group;

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

    return (
      <NextCheckbox
        {...otherProps}
        prefix={prefix}
        className={cls(className, {
          [`${prefix}xl`]: size === 'xl',
          [`${prefix}large`]: size === 'large',
          [`${prefix}medium`]: size === 'medium',
          [`${prefix}small`]: size === 'small',
        })}
      />
    );
  }
}

hoistNonReactStatics(Checkbox, NextCheckbox);

export default ConfigProvider.config(Checkbox);
