import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import api from '../../api';

var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());

const options = ct.customOptionsFixedColumn();
const style = {
    position: "sticky",
    left: 0,
    background: "white",
    zIndex: 101,
};
const style2 = {
    position: "sticky",
    left: 420,
    background: "white",
    zIndex: 101
};

export default class CorporateAnnualTarget extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataTable: [
                // ["FINANCIAL PERSPECTIVE", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181"],
                // ["Control", "-", "-"],
                // ["Accumulated Depreciation (negative value)", "2,647,647", "2,058,898"],
                // ["Control", "-", "-"],
                // ["Gain / (Loss) on Fixed Assets", "-", "-"],
                // ["Control", "-", "-"]
            ]
        }
        this.handleValue = this.handleValue.bind(this)
    }

    componentDidMount() {
        this.getItemHierarki()
        console.log(this.props);
    }

    getItemHierarki() {
        let payload = {
            "report_id": this.props.report_id,
            "company_id": this.props.company.company_id
        }
        api.create().getItemReportHierarki(payload).then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === "success") {
                    let dataTable = []
                    response.data.data.map((item, index) => {
                        if (item.children && item.children.length > 0) {
                            dataTable.push([
                                item.type_report_id,
                                item.id,
                                item.parent,
                                item.formula,
                                item.level,
                                item.description
                            ])
                            item.children.map(i => {
                                if (i.children) {
                                    if (i.children.length > 0) {
                                        dataTable.push([
                                            i.type_report_id,
                                            i.id,
                                            i.parent,
                                            i.formula,
                                            i.level,
                                            i.description
                                        ])
                                        i.children.map(val => {
                                            if (val.children && val.children.length > 0) {
                                                dataTable.push([
                                                    val.type_report_id,
                                                    val.id,
                                                    val.parent,
                                                    val.formula,
                                                    val.level,
                                                    val.description
                                                ])
                                                val.children.map(items => {
                                                    console.log(items)
                                                    dataTable.push([
                                                        items.type_report_id,
                                                        items.id,
                                                        items.parent,
                                                        items.formula,
                                                        items.level,
                                                        items.description
                                                    ])
                                                })
                                            } else {
                                                dataTable.push([
                                                    val.type_report_id,
                                                    val.id,
                                                    val.parent,
                                                    val.formula,
                                                    val.level,
                                                    val.description
                                                ])
                                            }
                                        })
                                    } else {
                                        dataTable.push([
                                            i.type_report_id,
                                            i.id,
                                            i.parent,
                                            i.formula,
                                            i.level,
                                            i.description
                                        ])
                                    }
                                } else {
                                    dataTable.push([
                                        i.type_report_id,
                                        i.id,
                                        i.parent,
                                        i.formula,
                                        i.level,
                                        i.description
                                    ])
                                }
                            })
                        } else {
                            dataTable.push([
                                item.type_report_id,
                                item.id,
                                item.parent,
                                item.formula,
                                item.level,
                                item.description
                            ])
                        }
                    })
                    console.log(dataTable);
                    this.setState({ dataTable })
                }
            }
        })
    }

    handleValue(data) {
        let total = 0
        this.state.dataTable.map((item, index) => {
            if (data.rowData[1] == item[2]) {
                total = item[data.columnIndex] == undefined ? (total + 0) : (total + item[data.columnIndex])
            }
        })
        let indexParent = this.state.dataTable.findIndex((val) => val[1] == this.state.dataTable[data.rowIndex][2])
        let a = this.state.dataTable[data.rowIndex][data.columnIndex] = total
        // console.log(indexParent);
        return a
    }

    handleChange(value, tableMeta) {
        let val = String(value).split(",").join("")
        let data = this.state.dataTable
        let indexParent = data.findIndex((val) => val[1] == data[tableMeta.rowIndex][2])
        if (indexParent > 0) {
            console.log(indexParent)
            let a = data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
            let jagain = data[indexParent][tableMeta.columnIndex]
            a = data[indexParent][tableMeta.columnIndex] = jagain == undefined ? (0 + Number(val)) : (jagain + Number(val))
        } else {
            data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
        }
        this.forceUpdate()
        // console.log(this.state.dataTable)
        // this.setState({
        //     data: a,
        // }, () => console.log(this.state.dataTable))
    }

    render() {
        const columns = [{
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "Key Performance Indicator",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#354960', width: 388 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style }),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ width: 388 }}>
                            {tableMeta.rowIndex == 0 || tableMeta.rowIndex == 1 ?
                                <span style={{ fontSize: 12, fontWeight: 'bold' }}>{val}</span>
                                :
                                tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 || tableMeta.rowIndex == 8 ?
                                    <span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> :
                                    <span style={{ fontSize: 12, marginLeft: 20 }}>{val}</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "Weight",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell key={columnMeta.index} style={{ ...style2, top: 0, zIndex: 102, backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({
                    style: {
                        position: "sticky",
                        left: 420,
                        background: "white",
                        zIndex: 101
                    }
                })
            }
        }, {
            name: "UOM",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (value, tableMeta, updateValue) => {

                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowIndex === 3 || tableMeta.rowIndex === 4 || tableMeta.rowIndex === 9 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            // <Input
                                            //     value={this.formatValue(value)}
                                            //     style={{}}
                                            //     inputProps={{
                                            //         style: {
                                            //             color: "#5198ea",
                                            //             fontSize: 12,
                                            //             textAlign: 'right'
                                            //         }
                                            //     }}
                                            //     disableUnderline={true}
                                            //     inputStyle={{ color: 'red' }}
                                            // />
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                            />
                                        }
                                        onChange={event => updateValue(event.target.value)}
                                    />
                                </div> :
                                <span style={{ fontSize: 12, textAlign: 'right' }}>{value === "" ? "-" : value}</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "Jenis KPI",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "Max Ach.",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "Formula YTD",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "January 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "February 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "March 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "April 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "May 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "June 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "31 Dec 2021 Total",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "31 Dec 2022 Total",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "31 Dec 2023 Total",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }
        ]

        return (
            <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
                <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                    <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
                </div>
                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                    <Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
                        <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
                            <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Master Budget - Fixed Assets Movement</Typography>
                        </div>
                        <div style={{ padding: 20 }}>
                            <div>
                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
                            </div>

                            <div style={{ marginTop: 20, width: '100%' }}>
                                <MuiThemeProvider theme={getMuiTheme()}>
                                    <MUIDataTable
                                        data={this.state.dataTable}
                                        columns={columns}
                                        options={options}
                                    />
                                </MuiThemeProvider>
                            </div>
                        </div>
                        <div className="grid grid-2x">
                            <div className="col-1">
                                <button
                                    className="button"
                                    type="button"
                                    style={{
                                        backgroundColor: 'transparent',
                                        cursor: 'pointer',
                                        borderColor: 'transparent',
                                    }}
                                    onClick={() => this.props.onClickClose()}
                                >
                                    <div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                        <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Kembali</Typography>
                                    </div>
                                </button>
                            </div>
                            <div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%'}}>
                                <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960', marginRight: 20 }}>
                                    <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Cancel</Typography>
                                </div>
                                <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                    <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save</Typography>
                                </div>
                            </div>
                        </div>
                    </Paper>
                </div>
            </div>
        );
    }
}
