import React, { Component, useState, useEffect } from 'react';
import { Progress } from "reactstrap";
import Sparkline from "@/components/Common/Sparklines";
import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
import FlotChart from '@/components/Charts/Flot.js';
import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from '@/components/Config/flot.setup.js';
import Datatable from "@/components/Tables/Datatable";
import MorrisChart from '@/components/Charts//Morris';

const ChartPie = {

    data: [{
        "label": "Ditindaklanjuti DIKTI",
        "color": "#287DAD",
        "data": 70
    }, {
        "label": "Ditindaklanjuti DIKTI",
        "color": "#52D489",
        "data": 40
    }, {
        "label": "Ditutup",
        "color": "#FD4233",
        "data": 40
    }],

    options: {
        series: {
            pie: {
                show: true,
                innerRadius: 0,
                label: {
                    show: true,
                    radius: 0.8,
                    formatter: function (label, series) {
                        return '<div class="flot-pie-label">' +
                            //label + ' : ' +
                            Math.round(series.percent) +
                            '%</div>';
                    },
                    background: {
                        opacity: 0.8,
                        color: '#222'
                    }
                }
            }
        }
    }

}

const ChartBar = {
    data: [{
        // "label": "Complete",
        "color": "#5ab1ef",
        "data": [
            ["Ditindaklanjuti DIKTI", 111]
        ]
    }, {
        // "label": "In Progress",
        "color": "#f5994e",
        "data": [
            ["Ditindaklanjuti LLDIKTI", 79]
        ]
    }, {
        // "label": "Cancelled",
        "color": "#d87a80",
        "data": [
            ["Ditutup", 41]
        ]
    }],


    options: {
        series: {
            bars: {
                align: 'center',
                lineWidth: 0,
                show: true,
                barWidth: 0.2,
                fill: 0.9
            }
        },
        grid: {
            borderColor: '#eee',
            borderWidth: 1,
            hoverable: true,
            backgroundColor: '#fcfcfc'
        },
        tooltip: true,
        tooltipOpts: {
            content: (label, x, y) => x + ' : ' + y
        },
        xaxis: {
            tickColor: '#fcfcfc',
            mode: 'categories'
        },
        yaxis: {
            // position: 'right' or 'left'
            tickColor: '#eee'
        },
        shadowSize: 0
    }
}

function CaseProgress() {


    // const chartdata = [
    //     { y: "Delegasi DIKTI", a: 100 },
    //     { y: "Delegasi LLDIKTI", b: 70 },
    //     { y: "Ditutup", c: 50 }
    // ]

    // const barOptions = {
    //     element: 'morris-bar',
    //     xkey: 'y',
    //     ykeys: ["a", "b", "c"],
    //     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
    //     xLabelMargin: 2,
    //     barColors: ['#287DAD', '#52D489', '#FD4233'],
    //     resize: true
    // }

    return (
        <div className="card b">
            <div className="card-body bb">
                <div className="header-1">
                    <h2 className="card-title-1">Perkembangan</h2>
                </div >
                <div className="w-401">
                    <FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
                    {/* <MorrisChart type={'Bar'} id="morris-bar" data={chartdata} options={barOptions} /> */}
                </div>
            </div>
            <div className="card-body">
                <div className="header-1">
                    <h2 className="card-title-1">Rekapitulasi</h2>
                </div>
                <FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
            </div>
        </div >
    );
}

export default CaseProgress;