import CouponPanel from './CouponPanel';
import PresetsPanel from './PresetsPanel';
import CouponURLsPanel from './CouponURLsPanel';
import ChangelogPanel from './ChangelogPanel';
import { Component } from 'react';
import { connect } from 'react-redux';
import {cloneDeep, merge} from 'lodash';
import { CouponsPlus } from './globals';
import PanelActions from './actions/PanelActions';
import { Tabs } from './Tabs';

const {setActivePanel} = PanelActions;

class Main extends Component {
    panels = [
        CouponPanel,
        PresetsPanel,
        CouponURLsPanel,
        ChangelogPanel
    ];
    static defaultState = {
        "rows": merge([], cloneDeep(CouponsPlus.options.rows)),
        "preconditionsColumn": merge(
            [], 
            cloneDeep(CouponsPlus.options.preconditionsColumn)
        ),
        newColumnSelector: {
            isOpen: false,
            columnTemporaryId: ''
        },
        selectedPanel: CouponPanel.label
    };

    static mapStateToProps(state, props) {
        return merge({
            selectedPanel: state.selectedPanel?? CouponPanel.label,
        })
    };

    render() 
    {
        return <>
            <Tabs panels={this.panels}/>
            <div className="w-full h-full flex flex-col overflow-y-auto p-5">
                <div className="flex-shrink-0 ">
                    <div className="mt-4">
                        {this.panels.filter(Panel => Panel.label === this.props.selectedPanel).map(Panel => <Panel key={Panel.label}/>)}
                    </div>
                </div>
            </div>
        </>
    }
}

export default connect(Main.mapStateToProps, {setActivePanel})(Main);