/**
 * @file Accordion component
 * @author liangxiaojun(liangxiaojun@derbysoft.com)
 */

import React, {Component, createRef} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import RaisedButton from '../RaisedButton';
import Theme from '../Theme';
import ComponentUtil from '../_vendors/ComponentUtil';

class Accordion extends Component {

    static Theme = Theme;

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.accordionContent = createRef();

        this.state = {
            collapsed: props.collapsed,
            contentHeight: null
        };

    }

    /**
     * public
     */
    resetHeight = callback => {

        const el = this.accordionContent && this.accordionContent.current;
        if (this.state.collapsed || !el) {
            return;
        }

        const style = window.getComputedStyle(el);
        if (!style) {
            return;
        }

        this.setState({
            contentHeight: 'auto'
        }, () => {
            this.setState({
                contentHeight: el.clientHeight
            }, () => {
                callback && callback();
            });
        });

    };

    /**
     * public
     */
    collpase = () => {
        this.setState({
            collapsed: true
        }, () => {
            const {onCollpase, onChange} = this.props;
            onCollpase && onCollpase();
            onChange && onChange(true);
        });
    };

    /**
     * public
     */
    expand = () => {
        this.setState({
            collapsed: false
        }, () => {
            const {onExpand, onChange} = this.props;
            onExpand && onExpand();
            onChange && onChange(false);
        });
    };

    clickHandler = () => {
        this.state.collapsed ?
            this.expand()
            :
            this.collpase();
    };

    init = () => {
        if (!this.props.collapsed) {
            this.resetHeight();
        } else {
            setTimeout(() => {
                this.setState({
                    collapsed: false
                }, () => {
                    this.resetHeight(() => {
                        this.setState({
                            collapsed: this.props.collapsed
                        });
                    });
                });
            }, 0);
        }
    };

    componentDidMount() {
        this.init();
    }

    static getDerivedStateFromProps(props, state) {
        return {
            prevProps: props,
            collapsed: ComponentUtil.getDerivedState(props, state, 'collapsed')
        };
    }

    render() {

        const {children, className, style, title, collapseIcon} = this.props,
            {collapsed, contentHeight} = this.state,

            wrapperClassName = classNames('accordion', {
                collapsed: collapsed,
                [className]: className
            });

        return (
            <div className={wrapperClassName}
                 style={style}>

                <RaisedButton className="accordion-title"
                              theme={Theme.SECONDARY}
                              value={title}
                              rightIconCls={collapseIcon}
                              onClick={this.clickHandler}/>

                <div ref={this.accordionContent}
                     className="accordion-content"
                     style={{height: contentHeight}}>
                    {children}
                </div>

            </div>
        );

    }
}

Accordion.propTypes = {

    children: PropTypes.any,

    /**
     * The CSS class name of the root element.
     */
    className: PropTypes.string,

    /**
     * Override the styles of the root element.
     */
    style: PropTypes.object,

    /**
     * The accordion's title.
     */
    title: PropTypes.string,

    collapsed: PropTypes.bool,

    /**
     * Collapse icon.
     */
    collapseIcon: PropTypes.string,

    /**
     * Callback function fired when collpase the accordion.
     */
    onCollpase: PropTypes.func,

    /**
     * Callback function fired when expand the accordion.
     */
    onExpand: PropTypes.func,

    /**
     * Callback function fired when change the status of accordion.
     */
    onChange: PropTypes.func

};

Accordion.defaultProps = {
    title: 'title',
    collapsed: false,
    collapseIcon: 'fas fa-angle-down'
};

export default Accordion;

@@ -252,16 +252,17 @@
 utton';%0A
+%0A
 import T
@@ -1762,28 +1762,27 @@
 %7D;%0A%0A    
-clickHandler
+handleClick
  = () =%3E
@@ -2774,17 +2774,17 @@
 is.state
-,
+;
 %0A%0A      
@@ -2789,28 +2789,43 @@
     
-    wrapperC
+return (%0A            %3Cdiv c
 lassName
  = c
@@ -2820,19 +2820,18 @@
 lassName
- = 
+=%7B
 classNam
@@ -2943,72 +2943,8 @@
   %7D)
-;%0A%0A        return (%0A            %3Cdiv className=%7BwrapperClassName
 %7D%0A  
@@ -3236,20 +3236,19 @@
 his.
-clickHandler
+handleClick
 %7D/%3E%0A

update Accordion