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: "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",
					},
				},
			},
		},
	},
};

function CaseProgress({ data }) {
	const ChartBar = {
		data: [
			{
				// "label": "Complete",
				color: "#5ab1ef",
				data: [["Sudah diperiksa", data.evaluasi.hasEvaluasi]],
			},
			{
				// "label": "In Progress",
				color: "#f5994e",
				data: [["Belum diperiksa", data.evaluasi.notHasEvaluasi]],
			},
		],

		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,
		},
	};
	// 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" />
				</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;