import React, { Component } from 'react';
import ContentWrapper from '@/components/Layout/ContentWrapper';
import { jumlahLaporan } from "@/actions/pelaporan";
import VectorMap from '@/components/Maps/VectorMap';
import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
const defaultColors = {
    markerColor: '#f20226',
    bgColor: 'transparent',
    scaleColors: ["#146804", "#ff0000"],
    regionFill: '#bbbec6'
};
const RegionValues = {
    'ID_su': 0,
    'ID_su': 0,
    'ID_ss': 0,
    'ID_la': 0,
    'ID_be': 0,
    'ID_bb': 0,
    'ID_jk': 33,
    'ID_jb': 0,
    'ID_bt': 0,
    'ID_yo': 0,
    'ID_jt': 0,
    'ID_jl': 0,
    'ID_ba': 0,
    'ID_nb': 0,
    'ID_sg': 0,
    'ID_sn': 0,
    'ID_sr': 0,
    'ID_sb': 0,
    'ID_ri': 0,
    'ID_kr': 0,
    'ID_ja': 0,
    'ID_ks': 0,
    'ID_kb': 0,
    'ID_ki': 0,
    'ID_kt': 0,
    'ID_ku': 0,
    'ID_ma': 0,
    'ID_mu': 0,
    'ID_ac': 0,
    'ID_pa': 0,
    'ID_pb': 0,
    'ID_nt': 0,
    'ID_go': 0,
    'ID_st': 0,
    'ID_sa': 0,
}
// const RegionValues = {
//     'ID_su': 1,
//     'ID_su': 2,
//     'ID_ss': 3,
//     'ID_la': 4,
//     'ID_be': 5,
//     'ID_bb': 6,
//     'ID_jk': 2,
//     'ID_jb': 9,
//     'ID_bt': 9,
//     'ID_yo': 8,
//     'ID_jt': 5,
//     'ID_jl': 1,
//     'ID_ba': 2,
//     'ID_nb': 1,
//     'ID_sg': 1,
//     'ID_sn': 1,
//     'ID_sr': 1,
//     'ID_sb': 10,
//     'ID_ri': 10,
//     'ID_kr': 10,
//     'ID_ja': 10,
//     'ID_ks': 11,
//     'ID_kb': 11,
//     'ID_ki': 11,
//     'ID_kt': 11,
//     'ID_ku': 11,
//     'ID_ma': 12,
//     'ID_mu': 12,
//     'ID_ac': 13,
//     'ID_pa': 14,
//     'ID_pb': 14,
//     'ID_nt': 15,
//     'ID_go': 16,
//     'ID_st': 16,
//     'ID_sa': 16,
// }
const LLDIKTI = {
    'ID_su': '
LLDIKTI Wilayah I
',
    'ID_ss': 'LLDIKTI Wilayah II
',
    'ID_la': 'LLDIKTI Wilayah II
',
    'ID_be': 'LLDIKTI Wilayah II
',
    'ID_bb': 'LLDIKTI Wilayah II
',
    'ID_jk': 'LLDIKTI Wilayah III
',
    'ID_jb': 'LLDIKTI Wilayah IV
',
    'ID_bt': 'LLDIKTI Wilayah IV
',
    'ID_yo': 'LLDIKTI Wilayah V
',
    'ID_jt': 'LLDIKTI Wilayah VI
',
    'ID_jl': 'LLDIKTI Wilayah VII
',
    'ID_ba': 'LLDIKTI Wilayah VIII
',
    'ID_nb': 'LLDIKTI Wilayah VIII
',
    'ID_sg': 'LLDIKTI Wilayah IX
',
    'ID_sn': 'LLDIKTI Wilayah IX
',
    'ID_sr': 'LLDIKTI Wilayah IX
',
    'ID_sb': 'LLDIKTI Wilayah X
',
    'ID_ri': 'LLDIKTI Wilayah X
',
    'ID_kr': 'LLDIKTI Wilayah X
',
    'ID_ja': 'LLDIKTI Wilayah X
',
    'ID_ks': 'LLDIKTI Wilayah XI
',
    'ID_kb': 'LLDIKTI Wilayah XI
',
    'ID_ki': 'LLDIKTI Wilayah XI
',
    'ID_kt': 'LLDIKTI Wilayah XI
',
    'ID_ku': 'LLDIKTI Wilayah XI
',
    'ID_ma': 'LLDIKTI Wilayah XII
',
    'ID_mu': 'LLDIKTI Wilayah XII
',
    'ID_ac': 'LLDIKTI Wilayah XIII
',
    'ID_pa': 'LLDIKTI Wilayah XIV
',
    'ID_pb': 'LLDIKTI Wilayah XIV
',
    'ID_nt': 'LLDIKTI Wilayah XV
',
    'ID_go': 'LLDIKTI Wilayah XVI
',
    'ID_st': 'LLDIKTI Wilayah XVI
',
    'ID_sa': 'LLDIKTI Wilayah XVI
',
}
class Maps extends Component {
    state = {
        series: {
            regions: [{
                values: RegionValues,
                scale: defaultColors.scaleColors,
                normalizeFunction: 'polynomial'
            }]
        },
        markers: [
            // { latLng: [0.293347, 101.706825], name: 'aceh' },
            // { latLng: [4.695135, 96.749397], name: 'ID_ac' },
            // { latLng: [-0.52, 166.93], name: 'Nauru' },
            // { latLng: [-8.51, 179.21], name: 'Tuvalu' },
            // { latLng: [7.11, 171.06], name: 'Marshall Islands' },
            // { latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis' },
            // { latLng: [3.2, 73.22], name: 'Maldives' },
            // { latLng: [35.88, 14.5], name: 'Malta' },
            // { latLng: [41.0, -71.06], name: 'New England' },
            // { latLng: [12.05, -61.75], name: 'Grenada' },
            // { latLng: [13.16, -59.55], name: 'Barbados' },
            // { latLng: [17.11, -61.85], name: 'Antigua and Barbuda' },
            // { latLng: [-4.61, 55.45], name: 'Seychelles' },
            // { latLng: [7.35, 134.46], name: 'Palau' },
            // { latLng: [42.5, 1.51], name: 'Andorra' }
        ],
        options: {
            map: 'id_ID',
            backgroundColor: defaultColors.bgColor,
            zoomMin: 1,
            zoomMax: 8,
            zoomOnScroll: true,
            regionStyle: {
                initial: {
                    'fill': defaultColors.regionFill,
                    'fill-opacity': 1,
                    'stroke': 'none',
                    'stroke-width': 1.5,
                    'stroke-opacity': 1
                },
                hover: {
                    'fill-opacity': 0.5,
                    cursor: 'pointer'
                },
                selected: {
                    fill: 'yellow'
                },
                selectedHover: {}
            },
            focusOn: {
                x: 0.4,
                y: 0.6,
                scale: 1
            },
            markerStyle: {
                initial: {
                    fill: defaultColors.markerColor,
                    stroke: defaultColors.markerColor
                }
            },
            onRegionLabelShow: (e, el, code) => {
                el.html(LLDIKTI[code] + el.html() + ' : ' + RegionValues[code] + ' pelaporan');
            }
        }
    }
    render() {
        return (
            
                
                    
                
                
                    Peta Geografis Wilayah LLDikti
                
            
        );
    }
}
export default Maps;