import { Card, Divider, Space, Layout, Button } from "antd";
import ArabicPrice from "components/ArabicPrice";
import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
import ImageWithFallback from "components/ImageWithFallback";
import ProHeader from "components/ProHeader/ProHeader.tsx";
import ProText from "components/ProText.tsx";
import ProTitle from "components/ProTitle.tsx";
import { clearCart, selectCart } from "features/order/orderSlice.ts";
import styles from "pages/cart/cart.module.css";
import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
import { useNavigate, useParams } from "react-router-dom";

import { useAppDispatch, useAppSelector } from "redux/hooks.ts";

import { FormInstance } from "antd";
import useBreakPoint from "hooks/useBreakPoint.ts";
import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
import { Variant } from "utils/types/appTypes";
import DeleteIcon from "components/Icons/DeleteIcon";
import PlusIcon from "components/Icons/PlusIcon";

interface CartMobileTabletLayoutProps {
  form: FormInstance;
}

export default function CartMobileTabletLayout({
  form,
}: CartMobileTabletLayoutProps) {
  const { t } = useTranslation();
  const { items, orderType } = useAppSelector(selectCart);
  const { isRTL } = useAppSelector((state) => state.locale);
  const { subdomain } = useParams();
  const { pickup_type } = useAppSelector((state) => state.order.restaurant);
  const { isMobile, isTablet } = useBreakPoint();
  const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const getMenuItemImageStyle = () => {
    if (isMobile) {
      return {
        width: 115,
        height: 96,
      };
    }
    return {
      width: 120,
      height: 120,
    };
  };

  return (
    <Layout>
      <ProHeader>{t("cart.title")}</ProHeader>
      <Layout.Content
        className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
      >
        <Space
          orientation="vertical"
          size={isMobile ? "middle" : isTablet ? "large" : "large"}
          style={{ width: "100%", gap: 16, padding: 0 }}
        >
          {/* Table Number */}
          {(orderType === OrderType.DineIn ||
            orderType === OrderType.ToOffice) && <TableNumberCard  />}

          <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
            <Card className={styles.cartItem}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                }}
              >
                <div
                  style={{
                    marginTop: 3,
                    boxSizing: "border-box", // Explicit box model definition
                  }}
                >
                  <ProTitle
                    level={5}
                    style={{
                      whiteSpace: "nowrap",
                      fontWeight: 500,
                      fontStyle: "Medium",
                      fontSize: 18,
                      lineHeight: "140%",
                      letterSpacing: 0,
                    }}
                  >
                    {t("cart.yourOrder")}
                  </ProTitle>
                </div>

                <Button
                  shape="circle"
                  iconPlacement="start"
                  icon={
                    <DeleteIcon
                      className={styles.deleteIcon}
                      color={"#C0BFC4"}
                      dimension={16}
                    />
                  }
                  size="small"
                  className={styles.addButton}
                  style={{
                    width: 32,
                    height: 32,
                    border: "1px solid #DEDEE0",
                  }}
                  onClick={() => {
                    dispatch(clearCart());
                  }}
                />
              </div>

              {items.length >= 1 && (
                <Divider style={{ margin: "8px 0px 12px 0px" }} />
              )}
              {items.map((item, index) => (
                <div key={index} style={{ position: "relative" }}>
                  <Space
                    size="middle"
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                      height: "100%",
                    }}
                  >
                    <Space orientation="vertical" size="small">
                      <div
                        style={{
                          position: "absolute",
                          top: 0,
                          [isRTL ? "right" : "left"]: 0,
                        }}
                      >
                        <ProText
                          style={{
                            margin: 0,
                            lineClamp: 1,
                            fontSize: isMobile ? 14 : isTablet ? 16 : 18,
                            fontWeight: 600,
                          }}
                        >
                          {item.name}{" "}
                          <span
                            style={{
                              fontWeight: 400,
                            }}
                          >
                            {isRTL
                              ? (item.variant as Variant)?.optionsAR?.[0]?.value
                              : (item.variant as Variant)?.options?.[0]?.value}
                          </span>
                        </ProText>
                        <br />
                        <ProText
                          type="secondary"
                          className={`${styles.itemDescription} responsive-text`}
                          style={{
                            margin: 0,
                            lineClamp: 1,
                            padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
                            fontSize: isMobile ? 14 : isTablet ? 18 : 20,
                            display: "-webkit-box",
                            WebkitBoxOrient: "vertical",
                            WebkitLineClamp: 1,
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            wordWrap: "break-word",
                            overflowWrap: "break-word",
                            lineHeight: "1.4",
                            maxHeight: isMobile
                              ? "3em"
                              : isTablet
                                ? "5em"
                                : "7em",
                            fontWeight: 500,
                            letterSpacing: "0.01em",
                            width: "55%",
                          }}
                        >
                          {item.description}
                        </ProText>
                      </div>
                      <div
                        style={{
                          position: "absolute",
                          bottom: index !== items.length - 1 ? 16 : 3,
                          [isRTL ? "right" : "left"]: 0,
                        }}
                      >
                        <ArabicPrice
                          price={item.price}
                          style={{ fontStyle: "bold" }}
                        />
                      </div>
                    </Space>
                    <div style={{ position: "relative" }}>
                      <ImageWithFallback
                        src={item.image}
                        alt={item.name}
                        className={`${styles.menuItemImage} responsive-image`}
                        {...getMenuItemImageStyle()}
                        fallbackSrc={
                          "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
                        }
                      />
                      <div
                        style={{
                          position: "absolute",
                          right: 3,
                          bottom: 3,
                        }}
                      >
                        <CartActionsButtons item={item} />
                      </div>
                    </div>
                  </Space>

                  {index !== items.length - 1 && (
                    <Divider style={{ margin: "10px 0" }} />
                  )}
                </div>
              ))}
              <Button
                style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
                onClick={() => {
                  navigate(
                    `/${subdomain}/menu?${
                      orderType ? `orderType=${orderType}` : ""
                    }`,
                  );
                }}
              >
                <PlusIcon dimesion="18" /> {t("cart.addMore")}
              </Button>
            </Card>
          </div>

          <YouMightAlsoLike />

          <SpecialRequestCard />

          {/* Car Plate*/}
          {((orderType === OrderType.Pickup && pickup_type === "car") ||
            orderType === OrderType.ScheduledOrder) && <CarPlateCard />}

          {/* Estimate Time */}
          {/* {(orderType === OrderType.Pickup ||
            orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />} */}

          {/* Collection Method */}
          {/* {orderType === OrderType.Pickup && (
            <ProInputCard title={t("cart.collectionMethod")}>
              <Form.Item
                name="collectionMethod"
                required
                rules={[
                  {
                    required: true,
                    message: t("cart.pleaseSelectCollectionMethod"),
                  },
                ]}
              >
                <ProRatioGroups
                  options={[
                    { label: t("cart.Cash"), value: "cod", price: "" },
                    {
                      label: t("cart.e-payment"),
                      value: "paymentgateway",
                      price: "",
                    },
                  ]}
                  value={collectionMethod}
                  onRatioClick={(value) => {
                    if (value === "cod") {
                      updateCollectionMethod(value);
                    } else {
                      updateCollectionMethod(value);
                    }
                  }}
                />
              </Form.Item>
            </ProInputCard>
          )} */}

          {/* Reward Your Waiter */}
          {/* <RewardWaiterCard /> */}

          {/* Invoice Summary */}
          {/* <OrderSummary /> */}
        </Space>
      </Layout.Content>
      <CartFooter form={form} />
    </Layout>
  );
}