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";
import AddRole from './UserRole/AddRole';
import EditRole from './UserRole/EditRole'
import api from "../../api";
import { titleCase } from "../../library/Utils";
import { InputAdornment, TextField } from "@material-ui/core";

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

export default class UserRole extends Component {
  constructor(props) {
    super(props)
    this.state = {
      listRole: [],
      indexData: {},
      add: false,
      edit: false
    }
  }

  componentDidMount() {
    this.getRole()
  }

  closeEdit() {
    this.setState({edit: false})
  }

  closeAdd() {
    this.setState({add: false})
  }

  getRole() {
    api.create().getRole().then((response) => {
      // console.log(response)
      if (response.data.status == 'success') {
        let data = response.data.data
        let listData = data.map((item,index) => {
          return [index, item.role_id, item.role_name, item.access, item.status]
        })
        console.log(listData)
        this.setState({listRole: listData})
        // this.setState({listRole: response.data.data}, () => {
        //   console.log(this.state.listRole)
        // })
        
      } else {
        alert(response.data.message)
      }
      console.log(response.data.data)
    })
  }

  render() {
    const columns = [{
      name: "Action",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex' }}>
              <button
                style={{
                  backgroundColor: 'transparent',
                  cursor: 'pointer',
                  borderColor: 'transparent',
                }}
                // onClick={() => console.log(tableMeta.rowData[1])}
                onClick={() => this.setState({edit: true, indexData: tableMeta.rowData[1]})}
              >
                <img src={Images.editCopy} />
              </button>
            </div >
          );
        }
      }
    }, {
      name: "ID",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex', width: 50 }}>
              {val}
            </div >
          );
        }
      }
    }, {
      name: "Nama Lengkap",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex', width: 200 }}>
              {titleCase(val)}
            </div >
          );
        }
      }
    }, {
      name: "Email",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex', width: 150 }}>
              {titleCase(val)}
            </div >
          );
        }
      }
    }, {
      name: "Role",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex', width: 100 }}>
              {titleCase(val)}
            </div >
          );
        }
      }
    }, {
      name: "Perusahaan",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex'}}>
              {val}
            </div >
          );
        }
      }
    }, "Status"]
    const data = [
      ["1", "1", "Juki Kudet", "Juki@gmail.com)", "Admin", "Kepo", "Aktif"],
      ["1", "2", "Kuji Mama", "Loro@gmail.com)", "Admin", "Kepo", "Aktif"],
      ["1", "3", "Sutaru", "Jaka@gmail.com)", "Admin", "Kepo", "Aktif"],
      ["1", "4", "Tatang Katro", "ikup@gmail.com)", "Admin", "Kepo", "Aktif"],
      ["1", "5", "Firman", "Sudir@gmail.com)", "Admin", "Kepo", "Aktif"],
    ]
    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={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - User</label>
            <div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
            <div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5}}>
                <TextField
                  id="input-with-icon-textfield"
                  name="search" 
                  value={this.state.search}
                  placeholder={'Search'}
                  onChange={(e) => {
                    this.setState({ search: e.target.value }, () => {
                      if (this.state.search.length > 0) {
                        this.searchRole()
                      } else {
                        this.getRole()
                      }
                    });
                  }}
                  onKeyDown={(e) => this._handleKeyDown(e)}
                  style={{width: '100%', borderBottomWidth: 0, borderBottomColor: 'red'}}
                  InputProps={{
                    style: { fontFamily: 'nunito', borderBottomColor: 'white'},
                    startAdornment: (
                      <InputAdornment position="start">
                        <SearchIcon />
                      </InputAdornment>
                    ),
                  }}
                />
              </div>
            </div>
            {/* <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.template}/>
              <img src={Images.upload} style={{marginLeft: 20}}/>
              <img src={Images.download} style={{marginLeft: 20}}/>
              <img src={Images.add} onClick={() => this.setState({add: true})} style={{marginLeft: 20}}/>
            </div>
          </div>
          <div style={{ padding: 25 }}>
            <MuiThemeProvider theme={getMuiTheme()}>
              <MUIDataTable
                data={data}
                columns={columns}
                options={options}
              />
            </MuiThemeProvider>
          </div>
        </div>
        {this.state.add && (
          <AddRole 
            onClickClose={this.closeAdd.bind(this)}
            data={this.state.indexData}
          />
        )}
        {this.state.edit && (
          <EditRole 
            onClickClose={this.closeEdit.bind(this)}
            data={this.state.indexData}
          />
        )}
      </div>
    );
  }
}