import React, { Component } from 'react'
import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab } from '@material-ui/core'
import ExceutiveScoreboard from './ExceutiveScoreboard'
import StrategiMap from './StrategiMap'

export default class DashboardCAT extends Component {
    constructor(props) {
        super(props)
        this.state = {
            periode: '2020',
            perusahaan: 'TAP Group',
            tab: 0
        }
    }

    selectTab = (event, newEvent) => {
        this.setState({ tab: newEvent })
    }

    render() {
        const perusahaan = [
            { value: 'TAP Group', label: 'TAP Group' },
            { value: '2019', label: '2019' },
            { value: '2018', label: '2018' },
            { value: '2017', label: '2017' },
            { value: '2016', label: '2016' },
        ]
        const periode = [
            { value: '2020', label: '2020' },
            { value: '2019', label: '2019' },
            { value: '2018', label: '2018' },
            { value: '2017', label: '2017' },
            { value: '2016', label: '2016' },
        ]
        return (
            <div className='a-s-p-mid no-header'>
                <div className={"main-color"} style={{ padding: 27 }}>
                    <Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
                </div>
                <div className="padding-20px" style={{ minWidth: 'max-content'}}>
                    <div style={{ marginTop: 20 }}>
                        <TextField
                            style={{ width: 250, }}
                            id="perusahaan"
                            select
                            label="Perusahaan"
                            value={this.state.perusahaan}
                            onChange={(e) => this.setState({ perusahaan: e.target.value })}
                        >
                            {perusahaan.map((option) => (
                                <MenuItem key={option.value} value={option.value}>
                                    {option.label}
                                </MenuItem>
                            ))}
                        </TextField>
                    </div>
                    <div style={{ marginTop: 20 }}>
                        <TextField
                            style={{ width: 250, }}
                            id="periode"
                            select
                            label="Periode"
                            value={this.state.periode}
                            onChange={(e) => this.setState({ periode: e.target.value })}
                        >
                            {periode.map((option) => (
                                <MenuItem key={option.value} value={option.value}>
                                    {option.label}
                                </MenuItem>
                            ))}
                        </TextField>
                    </div>

                    <Paper style={{ marginTop: 20, }}>
                        <AppBar position="static" style={{ borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
                            <Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#354960', borderColor: 'transparent',borderTopRightRadius: 10, borderTopLeftRadius: 10  }}>
                                <Tab label="Executive Scoreboard" style={{ color: '#fff', fontSize: 11 }} />
                                <Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} />
                                <Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} />
                            </Tabs>
                        </AppBar>
                        {this.state.tab === 0 ?
                            <ExceutiveScoreboard height={this.props.height} />
                            :
                            this.state.tab === 1 ?
                                <StrategiMap height={this.props.height} />
                                :
                                <span>Test2</span>
                        }
                    </Paper>
                </div>
            </div>
        )
    }
}