import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { CommonThemeProps } from '../types';
import { Collapse as NextCollapse } from '@alifd/next';
import { CollapseProps as NextCollapseProps } from '@alifd/next/types/collapse';
import { getTheme } from '../utils/getTheme';

interface CollapseProps extends NextCollapseProps, CommonThemeProps {
  arrowAlign?: 'left' | 'right';
}

class Collapse extends Component<CollapseProps> {
  static Panel = NextCollapse.Panel;

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

  render() {
    const theme = getTheme(this.context, this.props);
    const { prefix = 'next-', className, ...otherProps } = this.props;
    const arrowAlign = this.props.arrowAlign ? this.props.arrowAlign : (theme === 'white' ? 'right' : 'left');
    // right 模式
    return (
      <NextCollapse
        {...otherProps}
        prefix={prefix}
        className={cls(className, {
          [`${prefix}right`]: arrowAlign === 'right',
          [`${prefix}left`]: arrowAlign === 'left',
          [`${prefix}grey`]: theme === 'grey',
          [`${prefix}white`]: theme === 'white',
        })}
      />
    );
  }
}

hoistNonReactStatics(Collapse, NextCollapse);

export default ConfigProvider.config(Collapse);