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

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

export default class componentName extends Component {
  render() {
    const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
      name: "Action",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex' }}>
              <button
                style={{
                  backgroundColor: 'transparent',
                  cursor: 'pointer',
                  borderColor: 'transparent'
                }}
                onClick={() => null}
              >
                <img src={Images.editCopy2} />
              </button>
              <button
                style={{
                  backgroundColor: 'transparent',
                  cursor: 'pointer',
                  borderColor: 'transparent'
                }}
                onClick={() => null}
              >
                <img src={Images.editCopy} />
              </button>
            </div >
          );
        }
      }
    }]
    const data = [
      ["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
      ["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
      ["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
      ["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
      ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
    ]
    return (
      <div style={{ height: this.props.height }}>
        {/* <Row> */}
        <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
        <div>
          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
            <label style={{ color: 'white', width: '20%' }}>Master Data - Role & Otorisasi</label>
            <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label>
            <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
              <img src={Images.add} />
            </div>
          </div>
          <div style={{ padding: 25 }}>
            <MuiThemeProvider theme={getMuiTheme()}>
              <MUIDataTable
                data={data}
                columns={columns}
                options={options}
              />
            </MuiThemeProvider>

          </div>
        </div>
      </div>
    );
  }
}