import * as React from "react";
import { useTheme } from "@mui/material/styles";
import {
	Card,
	CardContent,
	Typography,
	Box,
	Select,
	MenuItem,
	FormControl,
	SelectChangeEvent,
} from "@mui/material";
import { BarChart } from "@mui/x-charts/BarChart";
import { axisClasses } from "@mui/x-charts/ChartsAxis";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

// Sample Data
const data = [
	{ name: "Jan", v1: 40 },
	{ name: "Feb", v1: 50 },
	{ name: "Mar", v1: 80 },
	{ name: "Apr", v1: 20 },
	{ name: "May", v1: 60 },
	{ name: "Jun", v1: 30 },
];

// Chart Configuration
const chartSetting = {
	yAxis: [
		{
			label: "Value",
			tickFormatter: (value: number) => `${value}`, // Formatting Y-axis ticks
		},
	],
	xAxis: [
		{
			dataKey: "name",
			scaleType: "band" as const,
		},
	],
	width: 500,
	height: 300,
	sx: {
		[`.${axisClasses.left} .${axisClasses.label}`]: {
			transform: "translate(-20px, 0)",
		},
	},
};

export default function RoundedBarChart() {
	const theme = useTheme();
	const [selectedOption, setSelectedOption] = React.useState("Monthly");

	 const handleChange = (event: SelectChangeEvent<string>) => {
			setSelectedOption(event.target.value);
		};

	return (
		<Card
			variant="outlined"
			sx={{
				width: "553px",
				height: "444px",
				borderRadius: "16px",
				"*:where([data-mui-color-scheme='dark']) &": {
					backgroundColor: "#202020",
				},
			}}
		>
			<CardContent>
				<Box display="flex" alignItems="center" color="#F2F2F2">
					<Typography
						variant="h6"
						color="#F2F2F2"
						sx={{
							fontFamily: "Gilroy",
							fontWeight: 500,
							fontSize: "18px",
							lineHeight: "24px",
						}}
					>
						Charge Stats
					</Typography>

					<FormControl
						sx={{
							mt: 2,
							ml: "auto",
							backgroundColor: "#202020",
							color: "#F2F2F2",
							width: "149px",
							height: "44px",
							padding: "12px 16px",
							gap: "8px",
						}}
					>
						<Select
							value={selectedOption}
							onChange={handleChange}
							sx={{
								color: "#D9D8D8",
								".MuiSelect-icon": {
									color: "#F2F2F2",
								},
							}}
							IconComponent={ExpandMoreIcon}
						>
							<MenuItem value="Monthly">Monthly</MenuItem>
							<MenuItem value="Weekly">Weekly</MenuItem>
							<MenuItem value="Daily">Daily</MenuItem>
							<MenuItem value="Yearly">Yearly</MenuItem>
						</Select>
					</FormControl>
				</Box>

				<BarChart
					dataset={data}
					series={[
						{
							dataKey: "v1",
							label: "Value",
							color: "skyblue",
						},
					]}
					{...chartSetting}
				/>
			</CardContent>
		</Card>
	);
}