import { Collapse } from 'react-collapse';
import React from 'react';
import styles from './CollapseEL.less';
import { Button } from 'antd';

class CollapseEL extends React.PureComponent {
  constructor(props) {
    super(props);
    const { isOpened } = this.props;
    this.state = {
      isOpened: isOpened !== false,
    };
  }

  render() {
    const { isOpened } = this.state;
    const { children } = this.props;
    // console.log(this.props);
    const _title = children.props.title;
    const _extra = children.props.extra;

    // children.props.title = null;
    const childrenWithProps = React.Children.map(children, (child) => {
      return React.cloneElement(child, {
        ...child.props,
        title: null,
        style: { ...child.props.style, margin: 0 },
      });
    });

    return (
      <div className={styles.panel}>
        <div className={styles.head}>
          <div className={styles.head_wrapper}>
            <div className={styles.head_title}>
              {_title}
            </div>
            <div className={styles.extra}>
              {_extra}
              <Button
                style={{ border: 'none' }}
                icon={isOpened ? 'shrink' : 'arrows-alt'}
                onClick={() => {
                  this.setState({
                    isOpened: !isOpened,
                  });
                }}
              />
            </div>
          </div>
        </div>

        <Collapse isOpened={isOpened} style={{ margin: '0 -1px' }}>
          {childrenWithProps}
          {/*<Card title={_title} style={{ maxHeight: '100%' }}></Card>*/}
        </Collapse>
      </div>
    );
  };
}

export default CollapseEL;
