import React from 'react';
import Modal from './Modal';

export interface ModalManagerProps {

}

export interface ModalManagerState {
    modals: ModalDescriptor[];
}

interface ModalDescriptor {
    id: number;
    url: string;
}

class ModalManager extends React.Component<ModalManagerProps, ModalManagerState> {
    private isInitialized = false;
    private readyCallback: () => void = () => {};

    state: ModalManagerState = {
        modals: [], // move to redux state
    };

    componentDidMount() {
        this.isInitialized = true;
        this.readyCallback();
    }

    public navigateTo = (url: string, data: object, type: 'GET' | 'POST') => {
        if (this.count() === 0) {
            // open new modal with given parameters
        } else {
            // change props of the last opened modal
        }
    };

    public navigateInBase = (url: string, data: object, type: 'GET' | 'POST') => {
        this.closeAllModals();
        this.navigateTo(url, data, type);
    };

    public openModal = (url: string, data: object, type: 'GET' | 'POST') => {
        // add parameters to the modals array in state
        // dispatch correct windowManager actions
    };

    public closeModal = (id: number) => {
        // remove modal with this id
        // dispatch correct windowManager actions
    };

    public closeTop = () => this.closeModal(this.state.modals[this.state.modals.length - 1].id);

    public closeAllModals = () => {
        this.state.modals.forEach(({ id }) => {
            this.closeModal(id);
        });
    };

    public count = () => this.state.modals.length;

    public onReady = (callback: () => void) => {
        if (this.isInitialized) {
            callback();
        } else {
            this.readyCallback = callback;
        }
    };

    public onEvent = (eventName: string, eventData?: string) => {
        // use modal middleware for events ???
    };

    handleModalClosed = (id: number) => (eventData: string) => {
        this.closeModal(id);
    };

    render() {
        const { modals } = this.state;

        return modals.map(({ id, url }, i) => (
            <Modal
                url={url}
                isActive={i === this.count() - 1}
                onModalClosed={this.handleModalClosed(id)}
                events={{ 'xhr-end': () => {}, 'navigation-finished': () => {} }}
            />
        ));
    }
}