import { PlusOutlined } from "@ant-design/icons";
import { Card, Divider, Space, Layout } 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 { selectCart } from "features/order/orderSlice.ts";
import styles from "pages/cart/cart.module.css";
import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
import { Link, useParams } from "react-router-dom";
import { colors } from "ThemeConstants.ts";

import { 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 CouponCard from "pages/cart/components/CouponCard.tsx";
import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
import { Variant } from "utils/types/appTypes";

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 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 }}
        >
          {/* Table Number */}
          {(orderType === OrderType.DineIn ||
            orderType === OrderType.ToOffice) && <TableNumberCard />}

          <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
            <div className={styles.cartItems}>
              <Card hoverable className={styles.cartItem}>
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "space-between",
                  }}
                >
                  <div
                    style={{
                      marginTop: 10,
                      boxSizing: "border-box", // Explicit box model definition
                    }}
                  >
                    <ProTitle level={5} style={{ whiteSpace: "nowrap" }}>
                      {t("cart.yourOrder")}
                    </ProTitle>
                  </div>

                  <Link
                    to={`/${subdomain}/menu?${
                      orderType ? `orderType=${orderType}` : ""
                    }`}
                    style={{
                      width: "100%",
                      textAlign: "end",
                    }}
                  >
                    <div
                      style={{
                        color: colors.primary,
                      }}
                    >
                      <PlusOutlined
                        style={{
                          color: colors.primary,
                          marginLeft: 5,
                          marginTop: 15,
                        }}
                      />
                      {t("cart.addMore")}
                    </div>
                  </Link>
                </div>

                {items.length >= 1 && (
                  <Divider style={{ margin: "0px 0px 10px 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>
                ))}
              </Card>
            </div>
          </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>
  );
}