import * as React from "react";
import { PieChart } from "@mui/x-charts/PieChart";
import { useDrawingArea } from "@mui/x-charts/hooks";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";

const colorPalette = [
	"hsla(202, 69%, 60%, 1)",
	"hsl(204, 48.60%, 72.50%)",
	"hsl(214, 56.40%, 30.60%)",
	"hsl(222, 6.80%, 50.80%)",
];
const data = [
	{ title: "Total Resources", value: 50, color: colorPalette[0] },
	{ title: "Total Stations", value: 20, color: colorPalette[1] },
	{ title: "Station Manager", value: 15, color: colorPalette[2] },
	{ title: "Total Booth", value: 15, color: colorPalette[3] },
];

export default function ResourcePieChart() {
	return (
		<Card
			variant="outlined"
			sx={{
				display: "flex",
				flexDirection: "column",
				gap: "12px",
				flexGrow: 1,
				width: "553px",
				height: "324px",
				padding: "16px",
				borderRadius: "16px",
				"*:where([data-mui-color-scheme='dark']) &": {
					backgroundColor: "#202020",
				},
			}}
		>
			<CardContent>
				<Typography
					component="h2"
					variant="subtitle2"
					color="#F2F2F2"
					width="84px"
					height="24px"
					sx={{
						fontWeight: 500,
						fontSize: "18px",
						lineHeight: "24px",
						color: "#FFFFFF",
					}}
				>
					Resources
				</Typography>
				<Box sx={{ display: "flex", alignItems: "center" }}>
					<PieChart
						colors={colorPalette}
						margin={{
							left: 60,
							right: 80,
							top: 80,
							bottom: 80,
						}}
						series={[
							{
								data,
								innerRadius: 50,
								outerRadius: 100,
								paddingAngle: 0,
								highlightScope: {
									faded: "global",
									highlighted: "item",
								},
							},
						]}
						height={300}
						width={300}
						slotProps={{
							legend: { hidden: true },
						}}
					></PieChart>

					<Stack spacing={1}>
						{data.map((entry, index) => (
							<Stack
								key={index}
								direction="row"
								spacing={1}
								alignItems="center"
							>
								<Box
									sx={{
										width: 16,
										height: 16,
										backgroundColor: entry.color,
										borderRadius: "50%",
									}}
								/>
								<Typography
									variant="body2"
									width="100px"
									height="16px"
									color="#FFFFFF"
								>
									{entry.title}
								</Typography>
							</Stack>
						))}
					</Stack>
				</Box>
			</CardContent>
		</Card>
	);
}
