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

export default class SubHolding extends Component {
    constructor(props) {
        super(props)
        this.state = {
            periode: '2020',
            perusahaan: 'TAP Group',
            laporan: 'Balance Sheet - Montly',
            tab: 0
        }
    }

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

    render() {
        const laporan = [
            { value: 'Balance Sheet - Montly', label: 'Balance Sheet - Montly'},
            { value: 'Profit & Loss - Montly', label: 'Profit & Loss - Montly'},
            { value: 'Fixed Assets Movement - Montly', label: 'Fixed Assets Movement - Montly'},
        ]
        const perusahaan = [
            { value: 'TIA', label: 'TIA' },
            { value: 'TAP Group', label: 'TAP Group' },
            { value: 'EKSAD', label: 'EKSAD' },
            { value: 'Puninar', label: 'Puninar' },
        ]
        const periode = [
            { value: '2020', label: '2020' },
            { value: '2019', label: '2019' },
            { value: '2018', label: '2018' },
            { value: '2017', label: '2017' },
            { value: '2016', label: '2016' },
        ]
        return (
            <div style={{ flex: 1, backgroundColor: '#f8f8f8' }} ref={this.myRef}>
                <div>
                    <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                        <Typography style={{ fontSize: '16px', color: 'white' }}>Sub Holding Report</Typography>
                    </div>
                    <div style={{ padding: 20, width: '100%' }}>
                        <Paper style={{ paddingTop: 10 }}>
                            <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
                                <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Sub Holding</Typography>
                            </div>
                            <div className="padding-20px" style={{ minWidth: 'max-content'}}>
                                <div style={{ marginTop: 20 }}>
                                    <TextField
                                        style={{ width: 250 }}
                                        id="laporan"
                                        select
                                        label="Jenis Laporan"
                                        value={this.state.laporan}
                                        onChange={(e) => this.setState({ laporan: e.target.value })}
                                    >
                                        {laporan.map((option) => (
                                            <MenuItem key={option.value} value={option.value}>
                                                {option.label}
                                            </MenuItem>
                                        ))}
                                    </TextField>
                                </div>
                                <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>
                                
                            </div>
                        </Paper>
                    </div>
                </div>
            </div>
        )
    }
}
