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 ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { useTheme } from "@mui/material/styles";

export default function SessionsChart() {
  const theme = useTheme();
  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: "100%",
				height: "auto",
				minHeight: { xs: "260px", sm: "270px", md: "290px" },
				gap: "16px",
				borderRadius: "30px",
				padding: { xs: "12px", sm: "16px", md: "20px" },
				border: "none",
				background: "#D0E1E9",
			}}
		>
			<CardContent
				sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}
			>
				<Typography
					variant="h6"
					align="left"
					// color="#F2F2F2"
					sx={{
						fontWeight: 600,
						fontSize: { xs: "12px", sm: "14px", md: "16px" },
						lineHeight: "24px",
						letterSpacing: "0%",
						// color: "#FAFAFA",
						marginBottom: { xs: 1, sm: 0.7, md: 1 },
					}}
				>
					Charging prices
				</Typography>

				{/* Dropdown button */}
				<FormControl
					sx={{
						mt: { xs: 1, sm: 1.5, md: 2 },
						mb: { xs: 1, sm: 1.5, md: 2 },
						width: "100%",
						border: "1px solid rgba(87, 85, 85, 0.53)",
						borderRadius: "8px",
					}}
				>
					<Select
						value={selectedStation}
						onChange={handleChange}
						label="Select Station"
						sx={{
							color: "#000000",
							"& .MuiSvgIcon-root": { color: "#000000" },
							fontSize: { xs: "14px", md: "16px" },
						}}
						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: "repeat(1, 1fr)", // 1 column on mobile
							sm: "repeat(2, 1fr)", // 2 columns on tablets
							md: "repeat(2, 1fr)", // 2x2 grid on desktop
						},
						gap: { xs: 1, sm: 1.5, md: 2 },
						width: "100%",
					}}
				>
					{[1, 2, 3, 4].map((item) => (
						<Box
							key={item}
							sx={{
								height: {
									xs: "105px",
									sm: "115px",
									md: "128px",
								},
								borderRadius: "8px",
								p: { xs: "10px", sm: "12px", md: "14px" },
								// backgroundColor: "#272727",
								// color: "#D9D8D8",
								backgroundColor: "#D9E7ED",
								display: "flex",
								flexDirection: "column",
								justifyContent: "center",
							}}
						>
							<Typography
								variant="body2"
								sx={{
									fontWeight: 600,
									fontSize: {
										xs: "12px",
										sm: "14px",
										md: "16px",
									},
									lineHeight: { xs: "20px", md: "24px" },
									marginBottom: "4px",
									color: "#111111",
								}}
								gutterBottom
							>
								Basic Charging
							</Typography>
							<Box display="flex" gap={1} alignItems="center">
								<Typography
									variant="subtitle2"
									sx={{
										fontWeight: 500,
										fontSize: {
											xs: "12px",
											sm: "14px",
											md: "16px",
										},
										lineHeight: { xs: "20px", md: "24px" },
									}}
									color="#454545"
									gutterBottom
								>
									16.83
								</Typography>
								<Typography
									sx={{
										fontWeight: 500,
										fontSize: {
											xs: "12px",
											sm: "14px",
											md: "16px",
										},
										lineHeight: { xs: "20px", md: "24px" },
									}}
									color="#454545"
								>
									cents/kWh
								</Typography>
							</Box>
						</Box>
					))}
				</Box>
			</CardContent>
		</Card>
  );
}
