bulk-email/src/components/LineChartCard/lineChartCard.tsx

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 TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
import { Box } from "@mui/material";


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>
	);
}
  const chartColor = " #111111";
export default function LineChartCard() {
	const theme = useTheme();
	const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
	const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));

	const dispatch = useDispatch<AppDispatch>();
	const { totalBookings, loading } = useSelector(
		(state: RootState) => state.dashboardReducer
	);
 
	// States for date range inputs
	const [startDateBookings, setStartDateBookings] = React.useState("");
	const [endDateBookings, setEndDateBookings] = React.useState("");

	// Function to fetch data with date filters
	const handleFetchData = () => {
		dispatch(fetchDashboardData({ startDateBookings, endDateBookings }));
	};

	// Generate chart data points (simulated here)
	const totalPoints = 10; // Divide total bookings into 10 intervals
	const chartData = Array.from({ length: totalPoints }, (_, i) => ({
		label: `Day ${i + 1}`,
		value: Math.round((totalBookings / totalPoints) * (i + 1)),
	}));

	// Calculate responsive chart dimensions
	const getChartHeight = () => (isXsScreen ? 200 : isSmScreen ? 220 : 250);
	const getChartMargin = () =>
		isXsScreen
			? { left: 35, right: 10, top: 15, bottom: 15 }
			: isSmScreen
			? { left: 40, right: 15, top: 18, bottom: 18 }
			: { left: 50, right: 20, top: 20 };

	return (
		<Card
			variant="outlined"
			sx={{
				width: "100%",
				height: "auto",
				minHeight: { xs: "360px", sm: "400px", md: "444px" },
				borderRadius: "16px",
				border: "none",
				background: "#D0E1E9",
			}}
		>
			<CardContent
				sx={{
					padding: { xs: 2, md: 3 },
					"&:last-child": { paddingBottom: { xs: 2, md: 3 } },
				}}
			>
				<div
					style={{
						display: "flex",
						alignItems: "center",
						flexDirection: isXsScreen ? "column" : "row",

						marginBottom: isXsScreen ? 16 : 0,
					}}
				>
					<Typography
						variant="h6"
						align={isXsScreen ? "center" : "left"}
						sx={{
							fontWeight: 600,
							fontSize: { xs: "12px", sm: "14px", md: "16px" },
							lineHeight: "24px",
							marginBottom: isXsScreen ? 2 : 0,
							width: isXsScreen ? "100%" : "auto",
						}}
					>
						Total Bookings Stats
					</Typography>
				</div>

				{/* Input fields for start and end date */}
				<div
					style={{
						display: "flex",
						flexDirection: isXsScreen ? "column" : "row",
						gap: "16px",
						marginTop: "16px",
					}}
				>
					<TextField
						type="date"
						label="Start Date"
						variant="outlined"
						fullWidth
						InputLabelProps={{ shrink: true }}
						value={startDateBookings}
						onChange={(e) => setStartDateBookings(e.target.value)}
						sx={{
							backgroundColor: "#DFECF1",
							border: "1px solid rgba(87, 85, 85, 0.53)",
							borderRadius: "8px",
						}}
					/>
					<TextField
						type="date"
						label="End Date"
						variant="outlined"
						fullWidth
						InputLabelProps={{ shrink: true }}
						value={endDateBookings}
						onChange={(e) => setEndDateBookings(e.target.value)}
						sx={{
							backgroundColor: "#DFECF1",
							border: "1px solid rgba(87, 85, 85, 0.53)",
							borderRadius: "8px",
						}}
					/>
					<Button
						onClick={handleFetchData}
						sx={{
							backgroundColor: "#000000",
							color: "white",
							borderRadius: "8px",
							width: "117px",

							"&:hover": { backgroundColor: "#000000" },
						}}
					>
						Apply
					</Button>
				</div>

				{/* Line Chart */}
				<Box sx={{ mt: 7.5 }}>
					<LineChart
						colors={[theme.palette.primary.main]}
						xAxis={[
							{
								scaleType: "point",
								data: chartData.map((data) => data.label),
							},
						]}
						series={[
							{
								id: "totalBookings",
								showMark: false,
								curve: "linear",
								area: true,
								data: chartData.map((data) => data.value),
								color: theme.palette.primary.main,
							},
						]}
						height={getChartHeight()}
						margin={getChartMargin()}
						grid={{ horizontal: true }}
						sx={{
							"& .MuiAreaElement-series-totalBookings": {
								fill: "url('#totalBookings')",
							},
						}}
					>
						<AreaGradient color={chartColor} id="totalBookings" />
					</LineChart>
				</Box>
			</CardContent>
		</Card>
	);
}