import React, { Component } from 'react';
//import { withRouter } from 'next/router'
import ContentWrapper from '@/components/Layout/ContentWrapper';
import { Row, Col, Card, Button, CardHeader, CardFooter, Table, Nav, NavItem, NavLink, TabContent, TabPane, Pagination, PaginationItem, PaginationLink, ListGroup, ListGroupItem, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';

// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import Select from 'react-select';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

import { GetServerSideProps, NextPage } from 'next';
import ErrorPage from 'next/error';
import fetch from 'node-fetch';

import https from 'https';

const containerStyle = {
    width: '100%',
    height: '155px'
};

import FormWizardVertical from './sanksi.proses.wizard.js';

var jenisPelanggaran = [];

//const qpt_id = {};

//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252

// Demo with custom style
const DemoMapCustomStyle = props => (
        <GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
        <Marker position={props.location} />
        </GoogleMap>
)

const styleHeaderText = {
    color: 'brown'
}

class Profile extends Component {

    toggleTab = tab => {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab
            });
        }
    }

    
    static async getInitialProps({ query }) {

        

        const httpsAgent = new https.Agent({
            rejectUnauthorized: false,
          });
        
          //console.log('post agent : ');


         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/707C3895-B546-4DA5-A6A7-EFE7461A7C7E', { 
        //  const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/'+query.ptId, { 
        //     method: 'get', 
        //     headers: new Headers({
        //       'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
        //       'Accept': 'application/json'
        //     }),
        //     agent: httpsAgent
        //   }
        //  )

        //console.log('res : ', res);
         
        //const json = await res.json();
        //console.log('json : ', json);
        const json = [
                        {
                            "id": "0BCE4DB7-B207-445D-8D03-0C54B7688252",
                            "kode": "031031",
                            "kode_satker": null,
                            "nama": "Universitas Satyagama",
                            "nama_singkat": "USG",
                            "sk_pendirian": "0742/O/1990",
                            "tgl_sk_pendirian": "1990-12-22",
                            "sk_operasional": null,
                            "tgl_sk_operasional": null,
                            "status": "N",
                            "alamat": {
                            "jalan": "Jalan Kamal Raya No 2-A Cengkareng",
                            "rt": null,
                            "rw": null,
                            "dusun": null,
                            "kelurahan": "-",
                            "kode_pos": "11730",
                            "kab_kota": {
                                "id": "016200",
                                "nama": "Kota Jakarta Barat"
                            }
                            },
                            "propinsi": {
                            "id": "010000",
                            "nama": "Prov. D.K.I. Jakarta"
                            },
                            "telepon": "(021) 5452377-78",
                            "faksimile": "(021) 54391325",
                            "website": "www.satyagama.ac.id",
                            "email": "info@satyagama.ac.id",
                            "status_milik": {
                            "id": "3",
                            "nama": "Yayasan"
                            },
                            "pembina": {
                            "id": "728989DD-251E-4516-BE2C-BA17A93A5C51",
                            "nama": "LLDIKTI III"
                            },
                            "bentuk_pendidikan": {
                            "id": "23",
                            "nama": "Universitas"
                            },
                            "last_update": "2021-08-22",
                            "negara": {
                            "id": "ID",
                            "nama": "Indonesia"
                            }
                    }
                ]


        return { data: json[0] }
      }

    state = {
        dropdownOpen: false,
        dropdownOpenUpload: false,
        timelineAlt: false,
        location: { lat: 33.7906731, lng: -117.8357194 },
        customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}],
        listA: [],
        //isChecked:true,
        selectedOptionMulti: [],
        activeTab: 'tasks'
        
    }

    toggleDD = () => this.setState({
        dropdownOpen: !this.state.dropdownOpen
    })

    toggleDDUpload = () => this.setState({
        dropdownOpenUpload: !this.state.dropdownOpenUpload
    })

    toggleTimeline = e => {
        this.setState({
            timelineAlt: e.target.checked
        })
    }

    // // handle particular changes on each checkbox
    // onHandleChange(listName,index) {
      
    //     //set state to checkbox and data in promise mode
    //     this.setState({
    //         [listName]: this.state[listName].map(
    //                     (item, i) => (
                            
    //                             index !== i ? 
    //                             item : {...item, checked: !this.state[listName][index].checked}
    //                         ) 
    //                 )
    //     });



    // }


    // state = {
    //     location: { lat: 33.7906731, lng: -117.8357194 },
    //     customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}]
    // }

    
    // renderTableData() {
    //     //const dataTable = this.props.data;
    //     //if (dataTable === true ) {


    //         return this.state.tbljenisPelanggaran.map((jp,index) => {
            
    //         return (
    //                 // <tr>
    //                 //     <td>
    //                 //         <label>{index+1}</label>
    //                 //     </td>
    //                 //     <td>
    //                 //         <div className="media align-items-center">
    //                 //             <a className="mr-3" href="">
    //                 //                 <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy"/>
    //                 //             </a>
    //                 //             <div className="media-body d-flex">
    //                 //                 <div>
    //                 //                     <h4 className="m-0">{pt.nama}</h4>
    //                 //                     <small className="text-muted">{pt.sk_pendirian} - {pt.website} - {pt.email}</small>
    //                 //                     <p>{pt.alamat.jalan}</p>
    //                 //                 </div>
    //                 //                 <div className="ml-auto">
    //                 //                     <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button>
    //                 //                 </div>
    //                 //             </div>
    //                 //         </div>
    //                 //     </td>
    //                 // </tr>
    //             <tr>
    //                 <td><label>{index+1}</label></td>
    //                 <td>
    //                     <div className="media align-items-center">
    //                         <div className="media-body d-flex">
    //                             <div>
                                    
    //                                 <p>{jp.Pelanggaran}</p>
    //                                 <p>TMT : {jp.TMTBulan} Bulan</p>
    //                                 <p>Level Pelanggaran : {jp.LabelSangsi}</p>
                                    
    //                             </div>
    //                         </div>
    //                     </div>
    //                 </td>
    //                 <td>
    //                     <div className="media align-items-center">
    //                         <div className="media-body d-flex">
    //                             <div>
    //                                 <p>{jp.Sangsi}</p>
    //                                 <p>Keterangan : {jp.KeteranganSangsi}</p>
    //                             </div>
    //                         </div>
    //                     </div>
    //                 </td>
    //                 <td>
    //                     <div className="checkbox c-checkbox">
    //                         <label>
    //                             {/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
    //                             <input 
    //                                     //name="cb"{jp.idPelanggaran}
    //                                     type="checkbox"
    //                                     // checked={
    //                                     //     jp.checked=true
    //                                     // } 
    //                                     checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
    //                                     //{this.state.listA[0].checked}
    //                                     onChange={
    //                                         e => this.onHandleChange('tbljenisPelanggaran',jp.idPelanggaran)
    //                                     }
    //                             />
    //                             <span className="fa fa-check"></span>
    //                         </label>
    //                     </div>
    //                 </td>
    //              </tr>
    //         )
    //         })
    //     //}
    //  }

/*     handleApplyClick = () => {

        const _noSangsi = document.getElementById('noSangsi').value
        
        const _hisJP=[];
        //Get data for filter by checked
        this.state.tbljenisPelanggaran.filter(
            _jp => _jp.checked == true
        ).map(selectedPelanggaran => (
            _hisJP.push(selectedPelanggaran)
        ));
        

        this.state.hisJenisPelanggaran.push(
            {
                "noSangsi":_noSangsi,
                "pelanggaran":_hisJP
            }
        )

        console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran)
    } */

    render() {

        const { selectedOptionMulti } = this.state;

        return (
            <ContentWrapper unwrap>
                <div className="bg-cover" style={{backgroundImage: 'url(/static/img/profile-bg.png)'}}>
                    <div className="p-4 text-center" style={styleHeaderText} >
                        <img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar"/>
                        <h3 className="m-0">{this.props.data.nama}</h3>
                        <p>{this.props.data.website}</p>
                        <p>{this.props.data.sk_pendirian}</p>
                        <p>{this.props.data.alamat.jalan}</p>
                    </div>
                </div>
                {/* <div className="text-center bg-gray-dark p-3 mb-4">
                    <Row>
                        <Col xs="4" className="br">
                            <h3 className="m-0">400</h3>
                            <p className="m-0">
                                <span className="d-none d-md-inline">Profile</span>
                                <span>Views</span>
                            </p>
                        </Col>
                        <Col xs="4" className="br">
                            <h3 className="m-0">2000</h3>
                            <p className="m-0">Likes</p>
                        </Col>
                        <Col xs="4">
                            <h3 className="m-0">100</h3>
                            <p className="m-0">Following</p>
                        </Col>
                    </Row>
                </div> */}
                {/* START card */}
                <div className="p-3">
                    {/* <Card className="card-default">
                        <CardHeader> */}
                                            {/* START panel tab */}
                {/* <div className="card card-transparent"> */}
                    <Nav tabs justified>
                        <NavItem>
                            <NavLink className={ this.state.activeTab === 'tasks' ? 'active':'' }
                                onClick={() => { this.toggleTab('tasks'); }}
                            >
                                <em className="far fa-clock fa-fw"></em> History Jenis Pelanggaran
                            </NavLink>
                        </NavItem>
                        {/* <NavItem>
                            <NavLink className={ this.state.activeTab === 'trans' ? 'active':'' }
                                onClick={() => { this.toggleTab('trans'); }}
                            >
                                <em className="fas fa-info-circle"></em> Action Jenis Pelanggaran
                            </NavLink>
                        </NavItem> */}
                        <NavItem>
                            <NavLink className={ this.state.activeTab === 'wizard' ? 'active':'' }
                                onClick={() => { this.toggleTab('wizard'); }}
                            >
                                <em className="fas fa-info-circle"></em> Action Jenis Pelanggaran
                            </NavLink>
                        </NavItem>
                    </Nav>

                    
                    <TabContent activeTab={this.state.activeTab} className="bg-white p-0">
                        <TabPane tabId="tasks">
                            <div className="p-3">
                                {/* START card */}
                                <Card className="card-default">
                                    <CardHeader>Daftar Pelanggaran</CardHeader>
                                    {/* START table-responsive */}
                                    <Table striped bordered hover responsive>
                                        <thead>
                                            <tr>
                                                <th>ID Laporan</th>
                                                <th>UUID Pelanggaran</th>
                                                <th>Progres</th>
                                                <th>Aktivitas Terakhir</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
                                                    <div className="d-flex align-items-center mb-3">BI:54678</div>
                                                </td>
                                                <td>
                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
                                                    <div className="d-flex align-items-center mb-3">ABCDEFGH012345</div>
                                                </td>
                                                <td>
                                                    <div className="progress progress-sm">
                                                        <div className="progress-bar progress-bar-striped bg-success" role="progressbar" style={{width: '10%'}}>
                                                            {/* <span className="sr-only">80% Complete</span> */}
                                                            {/* <div className="radial-bar radial-bar-50 radial-bar-xs" data-label="50%"></div> */}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div className="d-flex align-items-center mb-3">05/05/2021</div>
                                                    {/* <div className="ml-auto">05/05/2021</div> */}
                                                </td>
                                                <td>
                                                    <div className="d-flex align-items-center mb-3">
                                                        <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>Lanjutkan</Button>
                                                    </div>
                                                </td>

                                            </tr>
                                           
                                        </tbody>
                                    </Table>
                                    {/* END table-responsive */}
                                </Card>
                                {/* END card */}
                                                            
                            </div>
                        </TabPane>
                        
                        <TabPane tabId="wizard" className="p-3">
                            <FormWizardVertical />
                        </TabPane>
                    </TabContent>
                {/* </div> */}
                {/* END panel tab */}
                    {/* </CardHeader>
                </Card> */}
                </div>
                {/* START card */}
                <div className="p-3">
                    
                </div>
            </ContentWrapper>
            );
    }

}

export default Profile;