import React, { Component } from 'react';
import { Typography, InputAdornment, IconButton } from '@material-ui/core';
import TextField from "@material-ui/core/TextField";
import Images from '../assets/Images';
import MUIDataTable from "mui-datatables";
import SearchIcon from '@material-ui/icons/Search';

class ItemLaporan extends Component {
    render() {
        const columns = [{
            name: "Action",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
                            <button
                                style={{
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer',
                                    borderColor: 'transparent'
                                }}
                                onClick={() => null}
                            >
                                <img src={Images.editCopy} />
                            </button>
                        </div >
                    );
                }
            }
        }, "ID", "Tipe Persetujuan", "Order", "Nama Pemberi Persetujuan", "Operator", "Status"]
        const data = [
            ["", "1", "Yearly", "1", "John Doe", "-", "Aktif"],
            ["", "2", "Yearly", "2", "John Doe", "-", "Aktif"],
            ["", "3", "Yearly", "2", "John Doe", "AND", "Aktif"],
            ["", "4", "Yearly", "2", "John Doe", "AND", "Non Aktif"],
            ["", "5", "Yearly", "3", "John Doe", "-", "Non Aktif"],
        ]
        const options = {
            filter: false,
            sort: false,
            responsive: "scroll",
            print: false,
            download: false,
            selectableRows: false,
            viewColumns: false,
            rowsPerPage: 5,
            search: false
        }

        return (
            <div style={{ flex: 1 }}>
                <div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
                    <div style={{ display: 'flex' }}>
                        <Typography style={{ paddingTop: 8, paddingBottom: 7, fontSize: '16px', color: 'white' }}>Master Data - Approval Matrix</Typography>
                        <form style={{ marginLeft: 110}}>
                            <TextField 
                                id="search" 
                                label="" 
                                variant="outlined" 
                                size="small" 
                                placeholder="Search" 
                                style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}
                                InputProps={{
                                    startAdornment: <InputAdornment position="start"><img src={Images.searchBlack} style={{marginRight: 6}} /></InputAdornment>,
                                }}
                            />
                        </form>
                        <div style={{ display: 'flex' }}>
                            <button
                                style={{
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer',
                                    borderColor: 'transparent',
                                    marginLeft: 82,
                                    padding: 0
                                }}
                                onClick={() => null}
                            >
                                <img src={Images.template} />
                            </button>
                            <button
                                style={{
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer',
                                    borderColor: 'transparent',
                                    marginLeft: 16,
                                    padding:0
                                }}
                                onClick={() => null}
                            >
                                <img src={Images.upload} />
                            </button>
                            <button
                                style={{
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer',
                                    borderColor: 'transparent',
                                    marginLeft: 16,
                                    padding:0
                                }}
                                onClick={() => null}
                            >
                                <img src={Images.download} />
                            </button>
                            <button
                                style={{
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer',
                                    borderColor: 'transparent',
                                    marginLeft: 16,
                                    padding:0
                                }}
                                onClick={() => null}
                            >
                                <img src={Images.visualisasi} />
                            </button>
                            <button
                                style={{
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer',
                                    borderColor: 'transparent',
                                    marginLeft: 16,
                                    padding:0
                                }}
                                onClick={() => null}
                            >
                                <img src={Images.add} />
                            </button>
                        </div >
                    </div>
                    
                </div>
                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                    <div>
                        <MUIDataTable
                            data={data}
                            columns={columns}
                            options={options}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

export default ItemLaporan;