import React, { useEffect, useState } from "react";
import NavigationButtons from "./NavigationButtons";
import { useTranslation } from "react-i18next";
import useGetMyOrdersList from "../../api-manage/hooks/react-query/order/useGetMyOrdersList";
import { useDispatch, useSelector } from "react-redux";
import {
	CustomBoxFullWidth,
	CustomPaperBigCard,
	CustomStackFullWidth,
} from "styled-components/CustomStyles.style";
import { Grid, Skeleton, useMediaQuery } from "@mui/material";
import CustomEmptyResult from "../custom-empty-result";
import nodata from "../loyalty-points/assets/Search.svg";
import Order, { CustomPaper } from "./order";
import CustomPagination from "../custom-pagination";
import { data_limit } from "api-manage/ApiRoutes";
import { setCurrentTab, setOrderType } from "redux/slices/utils";
import { useTheme } from "@mui/material/styles";
import { toast } from "react-hot-toast";
import useGetTrackOrderData from "../../api-manage/hooks/react-query/order/useGetTrackOrderData";
import TabsTypeOne from "../custom-tabs/TabsTypeOne";
import active from "./assets/active_image.png";
import past from "./assets/past_image.png";
import { Stack } from "@mui/system";

const CustomShimmerCard = ({ isXs }) => {
	const theme = useTheme();
	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
	return (
		<CustomBoxFullWidth>
			<Grid container spacing={3}>
				{[...Array(6)].map((item, index) => {
					return (
						<Grid
							item
							xs={12}
							sm={isXs ? 12 : 6}
							md={12}
							lg={12}
							key={index}
						>
							<CustomPaper>
								<Stack
									direction={{ xs: "column", md: "row" }}
									justifyContent="space-between"
								>
									<Stack
										direction="row"
										spacing={1.5}
										alignItems="center"
										width="100%"
									>
										<Skeleton
											variant="rectangular"
											width={isSmall ? "100px" : "90px"}
											height={isSmall ? "100px" : "72px"}
										/>
										<Stack width="100%" spacing={0.5}>
											<Skeleton
												variant="text"
												width="200px"
												height={
													isSmall ? "15px" : "20px"
												}
											/>
											<Skeleton
												variant="text"
												width="130px"
												height={
													isSmall ? "15px" : "20px"
												}
											/>
											<Skeleton
												variant="text"
												width="130px"
												height={
													isSmall ? "15px" : "20px"
												}
											/>
											{isSmall && (
												<Stack
													direction="row"
													spacing={1}
													alignItems="center"
													justifyContent="space-between"
												>
													<Skeleton
														variant="text"
														width="100px"
														height="20px"
													/>
													<Skeleton
														variant="text"
														width="100px"
														height="35px"
													/>
												</Stack>
											)}
										</Stack>
									</Stack>
									{!isSmall && (
										<Stack
											direction="row"
											spacing={1}
											alignItems="center"
										>
											<Skeleton
												variant="text"
												width="130px"
												height="40px"
											/>
											<Skeleton
												variant="text"
												width="130px"
												height="60px"
											/>
										</Stack>
									)}
								</Stack>
							</CustomPaper>
						</Grid>
					);
				})}
			</Grid>
		</CustomBoxFullWidth>
	);
};

const MyOrders = (props) => {
	const tabsData = [
		{
			title: "ongoing",
			img: active,
		},
		{
			title: "previous",
			img: past,
		},
	];

	const theme = useTheme();
	const { configData } = props;
	const { t } = useTranslation();
	const isXs = useMediaQuery("(max-width:700px)");
	const { orderType, currentTab } = useSelector((state) => state.utilsData);

	const [offset, setOffSet] = useState(1);
	const dispatch = useDispatch();
	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
	const orderTypeValue = orderType === 0 ? "running-orders" : "list";

	const { data, refetch, isFetching } = useGetMyOrdersList({
		orderType: orderTypeValue,
		offset: offset,
	});

	useEffect(() => {
		refetch();
		dispatch(setOrderType(orderType === 0 ? 0 : 1));
	}, [orderType, offset]);

	useEffect(() => {
		if (currentTab) {
			setOffSet(1);
			dispatch(setOrderType(currentTab === "ongoing" ? 0 : 1));
		}
	}, [currentTab]);

	useEffect(() => {
		if (isFetching) {
			toast.loading(t("Getting Order List..."));
		} else {
			toast.dismiss();
		}
	}, [isFetching]);
	const handleInnerContent = () => {
		if (data) {
			if (data?.orders?.length === 0) {
				return (
					<CustomEmptyResult
						image={nodata}
						label="No Orders Found"
						width="128px"
						height="128px"
					/>
				);
			} else {
				return (
					<Grid container spacing={2}>
						{data &&
							data?.orders?.length > 0 &&
							data?.orders?.map((order, index) => (
								<Grid
									item
									xs={12}
									sm={isXs ? 12 : 6}
									md={12}
									lg={12}
									key={order?.id}
								>
									<Order
										index={index}
										order={order}
										t={t}
										configData={configData}
										dispatch={dispatch}
									/>
								</Grid>
							))}
					</Grid>
				);
			}
		} else {
			return <CustomShimmerCard isXs={isXs} />;
		}
	};
	return (
		<CustomStackFullWidth
			spacing={2}
			sx={{
				minHeight: "80vh",
				padding: isSmall
					? "10px 10px 10px 10px"
					: "20px 20px 20px 27px",
			}}
		>
			<TabsTypeOne
				tabs={tabsData}
				currentTab={currentTab}
				t={t}
				width="33px !important"
			/>
			{/*<NavigationButtons t={t} setOffset={setOffSet} />*/}

			<CustomStackFullWidth spacing={3}>
				{handleInnerContent()}
				{data?.total_size > data_limit && (
					<CustomPagination
						total_size={data?.total_size}
						page_limit={data_limit}
						offset={offset}
						setOffset={setOffSet}
					/>
				)}
			</CustomStackFullWidth>
		</CustomStackFullWidth>
	);
};

export default MyOrders;
