import * as React from "react";
import { useTheme } from "@mui/material/styles";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import { LineChart } from "@mui/x-charts/LineChart";
import { FormControl, MenuItem, Select } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
function AreaGradient({ color, id }: { color: string; id: string }) {
	
	return (
		<defs>
			<linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
				<stop offset="0%" stopColor={color} stopOpacity={0.5} />
				<stop offset="100%" stopColor={color} stopOpacity={0} />
			</linearGradient>
		</defs>
	);
}

function getDaysInMonth(month: number, year: number) {
	const date = new Date(year, month, 0);
	const monthName = date.toLocaleDateString("en-US", {
		month: "short",
	});
	const daysInMonth = date.getDate();
	const days = [];
	let i = 1;
	while (days.length < daysInMonth) {
		days.push(`${monthName} ${i}`);
		i += 1;
	}
	return days;
}

export default function LineChartCard() {
	const theme = useTheme();
	const data = getDaysInMonth(4, 2024);

	const colorPalette = [theme.palette.primary.light];
	const [selectedOption, setSelectedOption] = React.useState("Weekly");
	
		const handleChange = (event: { target: { value: React.SetStateAction<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>
				<div
					style={{
						display: "flex",
						alignItems: "center",
						color: "#F2F2F2",
					}}
				>
					<Typography
						variant="h6"
						align="left"
						color="#F2F2F2"
						sx={{
							fontFamily: "Gilroy",
							fontWeight: 500,
							fontSize: "18px",
							lineHeight: "24px",
						}}
					>
						Sales Stats
					</Typography>
					<FormControl
						sx={{
							mt: 2,
							mb: 2,
							backgroundColor: "#202020",
							marginLeft: "auto",
							marginRight: "16px",
							display: "flex",
							justifyContent: "center",
							alignItems: "center",
							// p: 1.5,
							color: "#F2F2F2",
							width: "149px",
							height: "44px",
							padding: "12px 16px",
							gap: "8px",
						}}
					>
						<Select
							value={selectedOption}
							onChange={handleChange}
							sx={{
								//backgroundColor: "#202020",
								color: "#D9D8D8",
								".MuiSelect-icon": {
									color: "#F2F2F2", // Icon color
								},
							}}
							IconComponent={ExpandMoreIcon}
						>
							<MenuItem value="Monthly">Monthly</MenuItem>
							<MenuItem value="Weekly">Weekly</MenuItem>
							<MenuItem value="Daily">Daily</MenuItem>
							<MenuItem value="Yearly">Yearly</MenuItem>
						</Select>
					</FormControl>
				</div>

				<LineChart
					colors={colorPalette}
					xAxis={[
						{
							scaleType: "point",
							data,
							tickInterval: (index, i) => (i + 1) % 5 === 0,
						},
					]}
					series={[
						{
							id: "direct",
							label: "Direct",
							showMark: false,
							curve: "linear",
							stack: "total",
							area: true,
							stackOrder: "ascending",
							data: [
								300, 900, 500, 1200, 1500, 1800, 2400, 2100,
								2700, 3000, 1800, 3300, 3600, 3900, 4200, 4500,
								3900, 4800, 5100, 5400, 4500, 5700, 6000, 6300,
								6600, 6900, 7200, 7500, 7800, 8100,
							],
							color: "#FFFFFF",
						},
					]}
					height={250}
					margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
					grid={{ horizontal: true }}
					sx={{
						"& .MuiAreaElement-series-direct": {
							fill: "url('#direct')",
						},
					}}
					slotProps={{
						legend: {
							hidden: true,
						},
					}}
				>
					<AreaGradient
						color={theme.palette.primary.light}
						id="direct"
					/>
				</LineChart>
			</CardContent>
		</Card>
	);
}
