// G!Example
import * as React from 'react';
import * as Component from './component/import';
import * as Func from './func/import';
import * as Lambda from './lambda/import';
import * as Page from './page/import';

import Config from './config/config';

/**
 * You should not edit this file for your example
 * Anyway, you can edit it for fun!
 * Please let me know if you have any issue or suggestion!
 */

export interface IState {
    step: number;
}

class Example extends React.Component<{}, IState> {
    public constructor(props) {
        super(props);
        let step = localStorage.getItem('step');
        this.setStep = this.setStep.bind(this);
        this.state = {
            step: parseInt(step, 10) || 0,
        };
    }

    public render() {
        return (
            <div>
                <div>ghoti-cli quick start example</div>
                <hr />
                {this.steps.bind(this)(this.state.step).map(this._mapSteps)}
                <div><button onClick={this.nextStep.bind(this)}>NEXT</button><button onClick={this.previousStep.bind(this)}>BACK</button></div>
                <hr />
            </div>
        );
    }

    protected nextStep() {
        localStorage.setItem('step', (this.state.step + 1).toString());
        this.setStep(this.state.step + 1);
    }

    protected previousStep() {
        localStorage.setItem('step', (this.state.step - 1).toString());
        this.setStep(this.state.step - 1);
    }

    protected setStep(step: number) {
        if (step < 0) {
            this.setStep(0);
        } else if (step > 9){
            this.setStep(9);
        } else {
            this.setState({
                step
            });
        }
    }

    protected _mapSteps(value: string, index: number) {
        return <div key={index}>{value}</div>;
    }

    protected steps(step: number) {
        switch (step) {
            case 0:
                return [
                    'Hello, in this example, we assume you have experience in React',
                    'Here are some quick start example for you to know how GHOTI structure working',
                    'You can always click NEXT button to continue process',
                ];
            case 1:
                return [
                    'First, lets create a page of your side',
                    'Type "npm run page example" in your terminal',
                ];
            case 2:
                return [
                    'You should have a page set up',
                    'To make it part of your router, go to /src/hello.tsx',
                    'Change example route\'s component value from "null" to "Page.example"',
                    'Try it with change your browser link to "localhost:8080/example"',
                ];
            case 3:
                return [
                    'You can make some change for fun',
                    'We are going to render a list and calculate complex math problem',
                    'Since, we want to reuse that list component, Use "npm run component list" to create one',
                ];
            case 4:
                return [
                    'Simply use whatever method you want to complete the list component',
                    'You may need to give it a sample test case to make it render normally',
                    'In /src/pages/example.page.tsx file, put <Component.list {[...props you setted]} /> to test it',
                ];
            case 5:
                return [
                    'Add a button to each element in your list; we are going to make it do some function',
                    'In ghoti cli suggested structure, a function set should be used as function collection with a side effect, like API, I/O, etc.',
                    'A lambda set should be used as functional function collection without side effect, like calculation, parsing, etc.',
                    'Run "npm run lambda calc" in your project',
                ];
            case 6:
                return [
                    'Check out your /src/func/calc.func.ts file',
                    'Write a simple function like determine a string\' length is larger than 5 or not',
                    'Add your function into export list, with ghoti cli func and lambda file structure, export default is not suggested',
                ];
            case 7:
                return [
                    'Back to /src/pages/example.page.tsx, Lambda and Func sets are already imported for you',
                    'With webpack, functions will not be duplicated imported, pre-imported function can make things easier and clearer',
                    'Try your function in the list',
                ];
            case 8:
                return [
                    'Fetch package is already pre-installed for you, typescript support await/ async grammar well',
                    'Run "npm run func fetch" in your project',
                    'Use fetch API and await/ async grammar to get some data from the internet, and render them in your list',
                ];
            case 9:
                return [
                    'Your application now looks awesome',
                    'Delete this folder, Run "ghoti init react [project-name]" to start a real thing!',
                ];
            default:
                return [];
        }
    }
}

export default Example;