import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { TextField, List, ListSubheader, Typography } from '@material-ui/core';
import MinimizeIcon from '@material-ui/icons/Minimize';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import TreeView from '@material-ui/lab/TreeView';
import TreeItem from '@material-ui/lab/TreeItem';

const useStyles = makeStyles((theme) => ({
    root: {
      width: '100%',
      maxWidth: 500,
      backgroundColor: theme.palette.background.paper,
    },
    nested: {
      paddingLeft: theme.spacing(4),
    },
  }));


const type = [
  {
    value: '1',
    label: 'KPI',
  },
  {
    value: '2',
    label: 'KPI',
  },
];

const companies = [
    {
      value: '',
      label: '',
    },
    {
      value: '1',
      label: 'TIA',
    },
    {
      value: '2',
      label: 'TIA',
    },
  ];

export default class VisualReportItems extends Component {
    constructor(props) {
        super(props)
        this.state = {
            open: false
        }
    }

    componentDidMount() {
        console.log(this.props.height)
    }

    render() {

        return (
            <div>    
                <div style={{ height: this.props.height }}>
                    <div style={{ height: 199, width: '100%' }} className={"main-color"} />
                        <div>
                            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
                                <label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label>
                            </div>
                            <div style={{ padding: 25, width: '100%' }}>
                                <div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}>
                                    <label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Item Laporan</label>
                                    <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                        <TextField
                                            id="reportItems"
                                            style={{ width: 250 }}
                                            select
                                            label="Item Laporan"
                                            // onChange={handleChange}
                                            helperText=""
                                            SelectProps={{
                                                native: true,
                                            }}
                                            InputLabelProps={{
                                                style: {
                                                    fontSize: 11,
                                                    fontWeight: 600,
                                                    fontFamily: 'Nunito Sans, sans-serif',
                                                    color: '#7e8085',
                                                    paddingLeft: 10
                                                }
                                            }}
                                            inputProps={{
                                                style: {
                                                    fontSize: 11,
                                                    fontWeight: 600,
                                                    fontFamily: 'Nunito Sans, sans-serif',
                                                    paddingLeft: 10
                                                }
                                            }}
                                            >
                                            {type.map((option) => (
                                                <option key={option.value} value={option.value}>
                                                {option.label}
                                                </option>
                                            ))}
                                        </TextField>
                                    </div>
                                    <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                        <TextField
                                            id="company"
                                            style={{ width: 250  }}
                                            select
                                            label="Perusahaan"
                                            // onChange={handleChange}
                                            helperText=""
                                            SelectProps={{
                                                native: true,
                                            }}
                                            InputLabelProps={{
                                                style: {
                                                    fontSize: 11,
                                                    fontWeight: 600,
                                                    fontFamily: 'Nunito Sans, sans-serif',
                                                    color: '#7e8085',
                                                    paddingLeft: 10
                                                }
                                            }}
                                            inputProps={{
                                                style: {
                                                    fontSize: 11,
                                                    fontWeight: 600,
                                                    fontFamily: 'Nunito Sans, sans-serif',
                                                    paddingLeft: 10
                                                }
                                            }}
                                            >
                                            {companies.map((option) => (
                                                <option key={option.value} value={option.value}>
                                                {option.label}
                                                </option>
                                            ))}
                                        </TextField>
                                    </div>
                                    <div className="margin-top-30px">
                                    <TreeView
                                        defaultCollapseIcon={<RemoveIcon />}
                                        defaultExpandIcon={< AddIcon/>}
                                        
                                        >
                                        <TreeItem nodeId="1" style={{margin: 10}} label="Accumulated Depreciation (negative value)">
                                            <TreeItem nodeId="2" style={{margin: 20}} label="Beginning Balance" />
                                            <TreeItem nodeId="3" style={{margin: 20}} label="Depreciation expense MTD (please fill in, if any)" />
                                            <TreeItem nodeId="4" style={{margin: 20}} label="Disposal (positive value) (please fill in, if any)" />
                                        </TreeItem>   
                                        <TreeItem nodeId="10" style={{margin: 20}} label="Control Gain/(Loss) on Fixed Assets" />                                     
                                        
                                        <TreeItem nodeId="5" style={{margin: 10}} label="Gain/(Loss) on Fixed Assets">
                                            <TreeItem nodeId="6" style={{margin: 20}} label="NBV">
                                                <TreeItem nodeId="7" style={{margin: 20}} label="Cost"/>
                                                <TreeItem nodeId="9" style={{margin: 20}} label="Accm. Depreciation" />
                                            </TreeItem>
                                            <TreeItem nodeId="10" style={{margin: 20}} label="Proceed from sale or disposal of Fixed Assets (please fill in, if any)" />
                                        </TreeItem>
                                    </TreeView>
                                </div>
                                </div>
                            </div>
                            <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
                                <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
                                    <span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
                                </div>
                                <div className="row" style={{ float: 'right', marginRight: 25 }}>
                                    <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
                                        <span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
                                    </div>
                                    <div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
                                        <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            
        );
    }
}
