import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import classnames from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Shell as NextShell } from '@alifd/next';
import { ShellProps as NextShellProps } from '@alifd/next/types/shell';

interface ShellProps extends NextShellProps {
  size?: 'large' | 'medium' | 'small';
}

class Shell extends Component<ShellProps> {
  static Branding = NextShell.Branding;
  static Navigation = NextShell.Navigation;
  static Action = NextShell.Action;
  static MultiTask = NextShell.MultiTask;
  static LocalNavigation = NextShell.LocalNavigation;
  static AppBar = NextShell.AppBar;
  static Content = NextShell.Content;
  static Footer = NextShell.Footer;
  static Ancillary = NextShell.Ancillary;
  static ToolDock = NextShell.ToolDock;
  static ToolDockItem = NextShell.ToolDockItem;

  render() {
    // 默认是使用主题色
    const { prefix = 'next-', className, type = 'brand', size = 'medium' } = this.props;
    const cls = classnames({
      [`${prefix}shell-${size}`]: true,
      [className]: !!className,
    });

    return (
      <NextShell
        {...this.props}
        type={type}
        className={cls}
      />
    );
  }
}

hoistNonReactStatics(Shell, NextShell);

export default ConfigProvider.config(Shell);