import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";

import Sparkline from "@/components/Common/Sparklines.js";
import MorrisChart from "@/components/Charts/Morris.js";
import { getDiskSpace } from "../../actions/disk";
import moment from "moment";

class ChartDonutDisk extends Component {
	constructor(props) {
		super(props);
		this.state = {

			use_disk: undefined,
			free_disk: undefined,
			loading: true,

		};
	}

	componentDidMount = async () => {
		const { token } = this.props;
		try {
			const dataDisk = await getDiskSpace(token);
			const use_disk = parseFloat(`${dataDisk?.data?.map(e => e.use_percent)}`.replace('%', ''));
			const free_disk = parseFloat(100 - use_disk);
			this.setState({ use_disk, free_disk, loading: false });
		} catch (error) {
			console.error("Error fetching disk space data: ", error);
			this.setState({ loading: false });
		}
	};

	ChartDonut = {


		options: {
			element: 'morris-donut',
			colors: ['#3e3a8e', '#fad732'],
			resize: true,
			formatter: function (value, data) {
				return value + '%';
			}
		},
	};


	render() {
		const { use_disk, free_disk, loading } = this.state;
		if (loading) {
			return <div>Loading...</div>;
		}

		const chartData = [
			{
				label: "Terpakai",
				color: "#3e3a8e",
				value: use_disk
			},
			{
				label: "Tidak Terpakai",
				color: "#b0adfe",
				value: free_disk
			}
		];

		return (

			<Col lg={12}>
				<Card className="card-default">
					<CardBody>
						<MorrisChart type={'Donut'} id="morris-donut" options={this.ChartDonut.options} data={chartData} className="flot-chart" />
					</CardBody>
					<div align="center" className=" mb-2">
						<span>Data Statistik Kapasitas Hardisk Per {moment().locale("id").format("DD MMMM YYYY")}</span>
					</div>
				</Card>
			</Col>
		);
	}
}

export default ChartDonutDisk;