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';

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 BalanceSheet extends Component {
    render() {
        const columns = [{
            name: "Account",
            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: "31 Dec 2020  Actual",
            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: "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: (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: "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>
                    )
                }
            }
        }
        ]
        const dataTable = [
            ["TOTAL ASSETS", "11,247,249", "10,702,196"],
            ["TOTAL CURRENT ASSETS", "2,647,647", "2,058,898"],
            ["Cash & Cash Equivalent", "1,464,571", "729,743"],
            ["Cash & Bank Balance", "938,707", "265584"],
            ["Time & Call Deposit", "525,864", "464,159"],
            ["BI Deposit", "", ""],
            ["Marketable Securities", "150,250", "154,500"],
            ["Notes Receivable", "", ""],
            ["Accounts Receivable", "172,031", "97,112"],
            ["Trade Receivables - Third Party", "142,668", "77,480"],
        ]
        return (
            <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
                <div style={{ height: 78, backgroundColor: '#354960', 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 }}>
                        <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
                            <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan - Balance Sheet</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={dataTable}
                                        columns={columns}
                                        options={options}
                                    />
                                </MuiThemeProvider>
                            </div>
                        </div>
                    </Paper>
                </div>
            </div>
        );
    }
}
