import React from 'react';

//ui items
import { Close, ExpandMore } from '@material-ui/icons';
import {
    Card,
    CardHeader,
    CardContent,
    AppBar,
    Button,
    Collapse,
    Toolbar,
    Dialog,
} from '@material-ui/core';

//doc components
import CloudTable from './cloudTable.jsx'
import CloudObject from './cloudObject.jsx'
import CloudUser from './cloudUser.jsx'
import CloudRole from './cloudRole.jsx'
import CloudFile from './cloudFile.jsx'
import CloudEvent from './cloudEvent.jsx'
import CloudCache from './cloudCache.jsx'
import CloudQueue from './cloudQueue.jsx'
import CloudBoostApi from './cloudBoostApi.jsx'

//css
import './drawer.css';

class QuickDocs extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            migrateTo: "",
            showCBAPI: false,
            showObject: false,
            showUser: false,
            showRole: false,
            showFile: false,
            showEvent: false,
            showCache: false,
            showQueue: false,
            showTable: false,
        }
    }

    learnMore() {
        let win = window.open("https://tutorials.cloudboost.io/", '_blank')
        win.focus()
    }

    componentWillMount(){
        this.setState({migrateTo:this.props.migrateTo});
    }

    componentWillReceiveProps(nextProps) {
        if (this.state.migrateTo !== nextProps.migrateTo) {
            this.setState({migrateTo: nextProps.migrateTo}, this.forceUpdate);
        }
    }

    onCardStateChange = (newState, view) => {
        if (newState)
            this.setState({migrateTo: view});
        else
            this.setState({migrateTo: ""});
    };

    render() {

        const styles = {
            bgInfo: {backgroundColor: "#d9edf7"},
            bgPrimary: {backgroundColor: "#549afc"},
            title: {
                fontSize: 20,
                letterSpacing: "-.5px",
                fontWeight: 500,
                lineHeight: "1.1",
                fontFamily: "Avenir Next,Helvetica Neue,Helvetica,sans-serif",
                color: "#fff"
            }
        };

        return (
            <div>
                {
                    this.props.openDrawer &&
                    <Dialog
                        fullScreen
                        onClose={() => this.props.toggleDrawer(false)}
                        open={this.props.openDrawer}
                        style={{overflow: "hide"}}
                    >

                        <AppBar
                            className="doc-bar"
                            style={{
                                backgroundColor: "#4F8EF7",
                                height: 60
                            }}
                        >
                            <Toolbar>
                                <Button color="inherit" aria-label="Close">
                                <Close
                                    color="#fff"
                                    onClick={() => this.props.toggleDrawer(false)}
                                />
                                </Button>
                                <span style={styles.title}>Quick Documentation</span>
                                <Button
                                    onClick={this.learnMore.bind(this)}
                                    label="More..."
                                >
                                    <span style={{...styles.title, fontSize: 14}}>Learn More...</span>
                                </Button>
                            </Toolbar>
                        </AppBar>
                        <div className="drawerSelector">

                            <Card className="drawer-header" id="cbapi">
                                <CardHeader
                                    title="Install CloudBoost"
                                    subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Install and Integrate Cloudboost SDK in your project"
                                    style={{fontWeight:"normal !important"}}
                                    action={
                                        <Button onClick={() => this.setState({ showCBAPI: !this.state.showCBAPI })}>
                                            <ExpandMore />
                                        </Button>
                                    }
                                />
                                <Collapse in={this.state.showCBAPI} timeout="auto" unmountOnExit>
                                    <CardContent style={{paddingTop:0}}>
                                        <CloudBoostApi {...this.props.manageApp}/>
                                    </CardContent>
                                </Collapse>
                            </Card>

                            <Card className="drawer-header" id="objects">
                                <CardHeader
                                    title="Cloud Object"
                                    subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="CloudObjects helps you to store JSON like structured in CloudBoost. "
                                    style={{fontWeight:"normal !important"}}
                                    action={
                                        <Button onClick={() => this.setState({ showObject: !this.state.showObject })}>
                                            <ExpandMore />
                                        </Button>
                                    }
                                />
                                <Collapse in={this.state.showObject} timeout="auto" unmountOnExit>
                                    <CardContent style={{paddingTop:0}}>
                                        <CloudObject />
                                    </CardContent>
                                </Collapse>
                            </Card>

                            <Card className="drawer-header" id="tables">
                                <CardHeader
                                    title="Cloud Table"
                                    subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Cloud Table helps you to store your desired data in row-column format."
                                    style={{fontWeight:"normal !important"}}
                                    action={
                                        <Button onClick={() => this.setState({ showTable: !this.state.showTable })}>
                                            <ExpandMore />
                                        </Button>
                                    }
                                />
                                <Collapse in={this.state.showTable} timeout="auto" unmountOnExit>
                                    <CardContent style={{paddingTop:0}}>
                                        <CloudTable />
                                    </CardContent>
                                </Collapse>
                            </Card>

                            <Card className="drawer-header" id="user">
                                <CardHeader
                                    title="Cloud User"
                                    subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Cloud User helps you to create User for your application."
                                    style={{fontWeight:"normal !important"}}
                                    action={
                                        <Button onClick={() => this.setState({ showUser: !this.state.showUser })}>
                                            <ExpandMore />
                                        </Button>
                                    }
                                />
                                <Collapse in={this.state.showUser} timeout="auto" unmountOnExit>
                                    <CardContent style={{paddingTop:0}}>
                                        <CloudUser />
                                    </CardContent>
                                </Collapse>
                            </Card>

                            <Card className="drawer-header" id="role">
                                <CardHeader
                                    title="Cloud Role"
                                    subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Cloud Role helps you to assign a specific role to a particular user of your Application."
                                    style={{fontWeight:"normal !important"}}
                                    action={
                                        <Button onClick={() => this.setState({ showRole: !this.state.showRole })}>
                                            <ExpandMore />
                                        </Button>
                                    }
                                />
                                <Collapse in={this.state.showRole} timeout="auto" unmountOnExit>
                                    <CardContent style={{paddingTop:0}}>
                                        <CloudRole />
                                    </CardContent>
                                </Collapse>
                            </Card>

                            <Card className="drawer-header" id="file">
                                <CardHeader
                                    title="Cloud File"
                                    subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Cloud File helps you to store information onto the CloudBoost Server in BLOB/File formats."
                                    style={{fontWeight:"normal !important"}}
                                    action={
                                        <Button onClick={() => this.setState({ showFile: !this.state.showFile })}>
                                            <ExpandMore />
                                        </Button>
                                    }
                                />
                                <Collapse in={this.state.showFile} timeout="auto" unmountOnExit>
                                    <CardContent style={{paddingTop:0}}>
                                        <CloudFile />
                                    </CardContent>
                                </Collapse>
                            </Card>

                            <Card className="drawer-header" id="analytics">
                                <CardHeader
                                    title="Cloud Event"
                                    subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Cloud Events helps you to track User Activity around your Application."
                                    style={{fontWeight:"normal !important"}}
                                    action={
                                        <Button onClick={() => this.setState({ showEvent: !this.state.showEvent })}>
                                            <ExpandMore />
                                        </Button>
                                    }
                                />
                                <Collapse in={this.state.showEvent} timeout="auto" unmountOnExit>
                                    <CardContent style={{paddingTop:0}}>
                                        <CloudEvent />
                                    </CardContent>
                                </Collapse>
                            </Card>

                            <Card className="drawer-header" id="cache">
                                <CardHeader
                                    title="Cloud Cache"
                                    subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Cloud Cache helps you maintain data."
                                    style={{fontWeight:"normal !important"}}
                                    action={
                                        <Button onClick={() => this.setState({ showCache: !this.state.showCache })}>
                                            <ExpandMore />
                                        </Button>
                                    }
                                />
                                <Collapse in={this.state.showCache} timeout="auto" unmountOnExit>
                                    <CardContent style={{paddingTop:0}}>
                                        <CloudCache />
                                    </CardContent>
                                </Collapse>
                            </Card>

                            <Card className="drawer-header" id="queue">
                                <CardHeader
                                    title="Cloud Queue"
                                    subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Cloud Queue helps you to line up your events."
                                    style={{fontWeight:"normal !important"}}
                                    action={
                                        <Button onClick={() => this.setState({ showQueue: !this.state.showQueue })}>
                                            <ExpandMore />
                                        </Button>
                                    }
                                />
                                <Collapse in={this.state.showQueue} timeout="auto" unmountOnExit>
                                    <CardContent style={{paddingTop:0}}>
                                        <CloudQueue />
                                    </CardContent>
                                </Collapse>
                            </Card>

                        </div>
                    </Dialog>
                }
            </div>
        )
    }
}

export default QuickDocs;