import React from 'react';
import { Flex } from 'grid-styled';
import 'gsap';

import Step from './Step';
import WizardHead from './WizardHead';
import WizardFooter from './WizarFooter';
import StepMenu from './StepMenu';

class Wizard extends React.Component{
    _steps = [];
    _stepsMounted = [];

    _currentPageIndex = 0;
    _currentPage = null;

    _menu = null;

    _head = null;
    _headMounted = null;

    _footer = null;
    _footerMounted = null;

    constructor(props){
        super(props);
    }

    componentDidMount(){
        TweenMax.to(this._stepsMounted.map(el => el.dom), 0, {autoAlpha: 0, display: 'none'});

        this.goto(this.props.initialPage ? this.props.initialPage : 0);
    }

    registerStep(step){
        this._stepsMounted.push(step);
    }

    registerHead(head){
        this._headMounted = head;
    }

    registerFooter(footer){
        this._footerMounted = footer;
    }

    next(){
        let newIndex = this._currentPageIndex + 1;

        if(newIndex < this._steps.length){
            this.goto(newIndex);
        }
    }

    prev(){
        let newIndex = this._currentPageIndex - 1;

        if(newIndex >= 0){
            this.goto(newIndex);
        }
    }

    goto(index){
        let oldPageIndex = this._currentPageIndex;
        this._currentPageIndex = index;
        let oldPage = this._currentPage;
        if(oldPage){
            TweenMax.to(oldPage.dom, 0.2, {autoAlpha: 0, display: 'none'});
            this._menu.setPassed(oldPageIndex);
        }

        this._currentPage = this._stepsMounted[index];
        this._menu.setActive(index);

        TweenMax.to(this._currentPage.dom, 0.3, {autoAlpha: 1, display: 'block'});

        if(this.props.onChange){
            this.props.onChange({index});
        }
    }


    render(){
        var count = 0;
        React.Children.map(this.props.children, child => {
            var props = {
                theme: this.props.theme,
                registerStep: this.registerStep.bind(this),
                next: this.next.bind(this),
                prev: this.prev.bind(this),
                goto: this.goto.bind(this),
                key: ++count
            }

            switch(child.type){
                case Step :
                    this._steps.push(React.cloneElement(child, props));
                    break;
                case WizardHead :
                    delete props.registerStep;
                    props.registerHead = this.registerHead.bind(this);
                    this._head = React.cloneElement(child, props);
                    break;
                case WizardFooter :
                    delete props.registerStep;
                    props.registerFooter = this.registerFooter.bind(this);
                    this._footer = React.cloneElement(child, props);
                    break;
            }
        });

        var titles = this._steps.map(el => el.props.title ? el.props.title : '');

        return (
            <Flex w={1} flexWrap='wrap' mt={this.props.theme.wizard.marginTop}>
                <Flex w={1}>
                    {this._head}
                </Flex>
                <Flex w={3/12} justifyContent='flex-start'>
                    <StepMenu theme={this.props.theme} ref={el => {this._menu = el}} goto={this.goto.bind(this)} titles={titles} theme={this.props.theme}/>
                </Flex>
                <Flex w={9/12}>
                    {this._steps}
                </Flex>
                <Flex w={1}>
                    {this._footer}
                </Flex>
            </Flex>
        );
    }
}

export default Wizard;
