import React, { Component, useState, useEffect } from 'react';
import { Progress } from "reactstrap";
import Sparkline from "@/components/Common/Sparklines";
import { Container, Row, Col, Card, CardHeader, CardBody, Button } 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": "Sudah diperiksa",
        "color": "#287DAD",
        "data": 70
    }, {
        "label": "Belum diperiksa",
        "color": "#52D489",
        "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": [
            ["Sudah diperiksa", 70]
        ]
    }, {
        // "label": "In Progress",
        "color": "#f5994e",
        "data": [
            ["Belum diperiksa", 40]
        ]
    },],


    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() {
    return (
        <div className="card b">
            <div className="card-body bb">
                <div className="margin-botton-20 text-tahun">
                    <Button className="float-left button-hidden icon-next">
                        <img src="/static/img/previous.png"></img>
                    </Button>
                    <Button className="float-left button-hidden icon-next">
                        <img src="/static/img/next.png"></img>
                    </Button>
                    <b className="text-tahun">Tahun 2022 </b>
                    <Button className="float-right button-hidden icon-eksport">
                        <img src="/static/img/Eksport.png"></img>
                    </Button>
                </div>
                <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" />
                </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;