import React, {Component} from 'react';
import {Layout, Menu} from 'antd';
import {FormattedMessage} from 'react-intl';

import GenerateJs from "./component/generateJs/GenerateJs";
import Deploy from '../common/deploy/Deploy';
import Manage from '../common/manage/Manage';
import Schema from './component/schema/Schema';
import Graphql from "./component/graphql/Graphql";
import CaseMetabase from "./component/caseMetabase/CaseMetabase";
import Application from "./component/application/Application";
import axios from 'axios';
import {getIdUrl} from "../../config";
import classnames from 'classnames';

axios.defaults.withCredentials = true;

const {Content} = Layout;

class TrialCase extends Component {
    constructor(props) {
        super(props);
        this.state = {
            menuLevel2: "schema",
            // default user
            userID: "ioobot",
            showPadding: true,
            api: ''
        }
    }

    switchMenu = (menuName, e) => {
        this.setState({
            [menuName]: e.key,
        });
    };

    switchAPI = (api) => {
        this.setState({
            api
        })
    };

    componentWillMount() {
        let _this = this;
        axios.get(getIdUrl)
            .then((res) => {
                if (res.data !== '') {
                    _this.setState({
                        userID: res.data
                    })
                }
            })
            .catch(function (err) {
                console.log(err);
            });
    }

    render() {
        let schemaID = this.props.location.state ? this.props.location.state.schemaID : "ecommerce_schemaID";
        let schemaName = this.props.location.state ? this.props.location.state.schemaName : "ecommerce";
        let projectID = this.props.location.state ? this.props.location.state.projectID : "";
        return (
            <div>
                <Menu
                    mode="horizontal"
                    defaultSelectedKeys={['schema']}
                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '5',lineHeight:'50px',fontWeight:600}}
                    onClick={(e) => this.switchMenu('menuLevel2', e)}
                    selectedKeys={[this.state.menuLevel2]}
                >
                    <Menu.Item key="schema"><FormattedMessage id="schema"/></Menu.Item>
                    <Menu.Item key="deploy"><FormattedMessage id="deploy"/></Menu.Item>
                    <Menu.Item key="manage"><FormattedMessage id="manage"/></Menu.Item>
                    <Menu.Item key="graphiql"><FormattedMessage id="graphql IDE"/></Menu.Item>
                    <Menu.Item key="template"><FormattedMessage id="template"/></Menu.Item>
                    <Menu.Item key="preview"><FormattedMessage id="preview"/></Menu.Item>
                    <Menu.Item key="metabase"><FormattedMessage id="metabase"/></Menu.Item>
                </Menu>


                <Layout style={{padding: '24px', zIndex: '0'}}>
                    <Content className={classnames({'layout-content': this.state.showPadding})}>
                        {
                            (() => {
                                switch (this.state.menuLevel2) {
                                    case 'schema':
                                        return <Schema trialcase={true} userID={this.state.userID} projectID={projectID} schemaName={schemaName} schemaID={schemaID} history={this.props.history} location={this.props.location}/>;
                                    case 'deploy':
                                        return <Deploy trialcase={true} userID={this.state.userID} projectID={projectID}/>;
                                    case 'manage':
                                        return <Manage trialcase={true} userID={this.state.userID} projectID={projectID} switchMenu={this.switchMenu}/>;
                                    case 'graphiql':
                                        return <Graphql api={this.state.api} projectID={projectID}/>;
                                    case 'template':
                                        return <GenerateJs schemaID={schemaID} schemaName={schemaName}/>;
                                    case 'preview':
                                        return <Application location={this.props.location}/>;
                                    case 'metabase':
                                        return <CaseMetabase/>;
                                    default:
                                        return <Graphql/>;
                                }
                            })()
                        }

                    </Content>
                </Layout>
            </div>
        )
    }
}

export default TrialCase;