import * as React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
export default function SessionsChart() {
	const [selectedStation, setSelectedStation] = React.useState(
		"Delhi NCR EV Station"
	);

	const handleChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
		setSelectedStation(event.target.value);
	};

	return (
		<Card
			variant="outlined"
			sx={{
				width: "553px",
				height: "324px",
				gap: "16px",
				borderRadius: "16px",
				padding: "20px",
				"*:where([data-mui-color-scheme='dark']) &": {
					backgroundColor: "#202020",
				},
			}}
		>
			<CardContent>
				<Typography
					variant="h6"
					align="left"
					color="#F2F2F2"
					width="132px"
					height="24px"
					gap={"12px"}
					sx={{
						fontFamily: "Gilroy",
						fontWeight: 500,
						fontSize: "18px",
						lineHeight: "24px",
						letterSpacing: "0%",
						color: "#FAFAFA",
					}}
				>
					Charging prices
				</Typography>

				{/* Dropdown button */}
				<FormControl
					sx={{
						mt: 2,
						mb: 2,
						width: "100%",
						// backgroundColor: "#202020",
						border: "1px solid #454545",
						borderRadius: "8px",
					}}
				>
					
					<Select
						value={selectedStation}
						onChange={handleChange}
						label="Select Station"
						sx={{
							//backgroundColor: "#202020",
							color: "#D9D8D8",
							"& .MuiSvgIcon-root": { color: "#F2F2F2" },
						}}
						IconComponent={ExpandMoreIcon}
					>
						<MenuItem value="Delhi NCR EV Station">
							Delhi NCR EV Station
						</MenuItem>
						<MenuItem value="Mumbai EV Station">
							Mumbai EV Station
						</MenuItem>
						<MenuItem value="Bangalore EV Station">
							Bangalore EV Station
						</MenuItem>
						<MenuItem value="Pune EV Station">
							Pune EV Station
						</MenuItem>
					</Select>
				</FormControl>

				{/* Grid container for the four boxes */}
				<Box
					sx={{
						display: "grid",
						gridTemplateColumns: {
							xs: "1fr",
							sm: "repeat(2, 1fr)",
						},
						gap: { xs: 1, sm: 2 },
						maxWidth: "750px",
						width: "100%",
						mx: "auto",
					}}
				>
					{[1, 2, 3, 4].map((item) => (
						<Box
							key={item}
							sx={{
								height: "84px",
								borderRadius: "8px",
								p: "12px 16px",
								backgroundColor: "#272727",
								color: "#D9D8D8",
							}}
						>
							<Typography
								component="h1"
								variant="body2"
								width="98px"
								height="24px"
								fontWeight={400}
								fontSize={"14px"}
								lineHeight={"24px"}
								gutterBottom
							>
								Basic Charging
							</Typography>
							<Box display={"flex"} gap={1}>
								<Typography
									component="h1"
									variant="subtitle2"
									color="#FFFFFF"
									width="40px"
									height={"24px"}
									fontWeight={500}
									fontSize="18px"
									lineHeight="24px"
									gutterBottom
								>
									16.83
								</Typography>

								<Typography
									width="71px"
									height="24px"
									gap="2px"
									fontWeight={400}
									fontSize={"14px"}
									lineHeight={"24px"}
								>
									cents/kWh
								</Typography>
							</Box>
						</Box>
					))}
				</Box>
			</CardContent>
		</Card>
	);
}