import React from 'react';
import { Collapse } from 'react-collapse';
import PropTypes from 'prop-types';
import CollapseExpandChild from './CollapseExpandChild';

export default class CollapseExpand extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            collapseData:this.props.collapseData.map(option => {return Object.assign(option, {isOpened:false});})
        };
    }

    handleIsOpenCollapse = (collapseItem) =>{
        this.state.collapseData.map((item,index) =>{
            if(item.key === collapseItem.key){
                let collapseData = [ ...this.state.collapseData ];
                collapseData[index] = {...collapseData[index], isOpened: !collapseItem.isOpened};
                this.setState({ collapseData });     
            }
        });
    }

    render() {
        return (
            <div className="jp-collapse-app">
                <section className="jp-collapse-section">
                    {this.state.collapseData.map((item,index) => {return(
                        <div className='jp-collapse-comp-parent jp-collapse-outline' key={item.key}>
                            <div className="jp-collapse-flex-container">
                                <div className="jp-collapse-comp-heading">{item.header}</div>
                                <div className="jp-collapse-separator-heading jp-collapse-line" />
                                <div className="jp-collapse-position-relative jp-collapse-outline"><span
                                    id={index} className="ui-hidden-accessible" style={{visibility:'hidden'}}>{item.header}</span>
                                <i onClick={() => this.handleIsOpenCollapse(item)} onKeyPress={() => this.handleIsOpenCollapse(item)}  role="button" aria-labelledby={index}aria-expanded={item.isOpened} tabIndex="0" className={item.isOpened? 'jp-collapse-accordian-arrow jp-collapse-arrow-up jp-collapse-outline' : 'jp-collapse-accordian-arrow jp-collapse-arrow-down jp-collapse-outline'} />
                                </div>
                            </div>
                            
                            <Collapse isOpened={item.isOpened} className="jp-collapse-outline">
                                <CollapseExpandChild key={item.key} childData={item.headerDetails} isOpened={item.isOpened} />
                            </Collapse>
                        </div>
                    );})}
                </section>
            </div>
        );
    }
}
  
CollapseExpand.propTypes = {
    /** collapseData which will be array */  
    collapseData : PropTypes.arrayOf(PropTypes.shape({
        key: PropTypes.string,
        header: PropTypes.string,
        headerDetails: PropTypes.arrayOf(PropTypes.shape({
            headerChild: PropTypes.string,
            child: PropTypes.string
        }))
    })).isRequired,
};