import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import MUIDataTable from "mui-datatables";

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

export default class PreviewAM extends Component {
    render() {
        const columns = ["ID", "Tipe Persetujuan", "Order", "Nama Pemberi Persetujuan", "Operator", "Berlaku Mulai", "Berlaku  Hingga"]
        const data = [
            ["1", "Yearly", "1", "John Doe", "-", "2020-01-01", "2020-12-31"],
            ["2", "Yearly", "2", "John Doe", "-", "2020-01-01", "2020-12-31"],
            ["3", "Yearly", "2", "John Doe", "AND", "2020-01-01", "2020-12-31"],
            ["4", "Yearly", "2", "John Doe", "AND", "2020-01-01", "2020-12-31"],
            ["5", "Yearly", "3", "John Doe", "-", "2020-01-01", "2020-12-31"],
        ]

        return (
            <div style={{ height: this.props.height }}>
                <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
                <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 }}>Preview Data</label>
                    </div>
                    <div style={{ padding: 25, width: '100%' }}>
                        <MuiThemeProvider theme={getMuiTheme()}>
                            <MUIDataTable
                                data={data}
                                columns={columns}
                                options={options}
                            />
                        </MuiThemeProvider>
                    </div>
                    <div className="row" style={{ alignSelf: 'center', 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>
        );
    }
}
