web-menu-react-version-/src/pages/cart/components/CartDesktopLayout.tsx

import { Card, Col, Divider, Row } from "antd";
import ArabicPrice from "components/ArabicPrice";
import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon.tsx";
import ImageWithFallback from "components/ImageWithFallback";
import ProText from "components/ProText.tsx";
import ProTitle from "components/ProTitle.tsx";
import styles from "pages/cart/cart.module.css";
import { colors } from "ThemeConstants.ts";
import { CartItem } from "utils/types/appTypes.ts";

import { FormInstance } from "antd";
import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
import { selectCart } from "features/order/orderSlice.ts";
import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
import CouponCard from "pages/cart/components/CouponCard.tsx";
import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.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 YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks.ts";
import CartFooter from "./cartFooter/CartFooter";

interface CartDesktopLayoutProps {
  form: FormInstance;
}

export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
  const { t } = useTranslation();
  const { items } = useAppSelector(selectCart);

  const orderType = localStorage.getItem("orderType");

  return (
    <>
      <div className={`${styles.cartContainer} ${styles.desktopCartContainer}`}>
        <Row gutter={40} style={{ width: "100%" }}>
          {/* Main Content Column */}
          <Col xs={24} lg={14} xl={16}>
            {/* Cart Items Section */}
            <Card className={styles.desktopCartItemsSection}>
              <div className={styles.desktopSectionHeader}>
                <ProTitle
                  level={3}
                  style={{ marginBottom: "8px", color: colors.primary }}
                >
                  {t("cart.yourOrder")}
                </ProTitle>
              </div>

              {items.length === 0 ? (
                <div className={styles.desktopEmptyCart}>
                  <div className={styles.desktopEmptyCartIcon}>
                    <EmptyOrdersIcon />
                  </div>
                  <ProTitle
                    level={4}
                    style={{ marginBottom: "16px", color: colors.primary }}
                  >
                    {t("common.emptyCart")}
                  </ProTitle>
                  <ProText
                    type="secondary"
                    style={{ marginBottom: "24px", fontSize: "16px" }}
                  >
                    {t("cart.emptyCartMessage")}
                  </ProText>
                </div>
              ) : (
                <div className={styles.desktopCartItems}>
                  {items.map((item, index) => (
                    <Card
                      key={item.id}
                      className={`${styles.desktopCartItem} desktop`}
                      styles={{
                        body: {
                          padding: 0,
                          borderRadius: 24,
                        },
                      }}
                    >
                      <Row
                        gutter={[28, 20]}
                        align="middle"
                        style={{ marginTop: index === 0 ? 20 : 0 }}
                      >
                        <Col xs={24} sm={8} md={6}>
                          <div className={styles.desktopImageContainer}>
                            <ImageWithFallback
                              src={item.image}
                              alt={item.name}
                              className={styles.desktopMenuItemImage}
                              style={{
                                width: 120,
                                height: 120,
                                borderRadius: 16,
                              }}
                              fallbackSrc={
                                "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
                              }
                              loadingContainerStyle={{
                                width: 120,
                                height: 120,
                                borderRadius: 16,
                              }}
                            />
                          </div>
                        </Col>

                        <Col xs={24} sm={16} md={12}>
                          <div className={styles.desktopItemDetails}>
                            <ProTitle
                              level={4}
                              style={{
                                marginBottom: "12px",
                                color: colors.primary,
                              }}
                            >
                              {item.name}
                            </ProTitle>
                            <ProText
                              type="secondary"
                              className={styles.desktopItemDescription}
                              style={{ marginBottom: "20px" }}
                            >
                              {item.description}
                            </ProText>
                            <div className={styles.desktopPriceContainer}>
                              <ProText strong className={styles.desktopPrice}>
                                <ArabicPrice
                                  price={item.price}
                                  style={{
                                    fontSize: "1rem",
                                    color: colors.primary,
                                  }}
                                />
                              </ProText>
                            </div>
                          </div>
                        </Col>

                        <Col xs={24} sm={24} md={6}>
                          <div className={styles.desktopActionsContainer}>
                            <CartActionsButtons item={item as CartItem} />
                          </div>
                        </Col>
                      </Row>
                      {index !== items.length - 1 && (
                        <Divider style={{ margin: "20px 0 0 0" }} />
                      )}
                    </Card>
                  ))}
                </div>
              )}
            </Card>

            <div style={{ marginTop: "1rem" }}>
              <CartFooter form={form} />
            </div>
          </Col>

          {/* Sidebar Column */}
          <Col xs={24} lg={10} xl={8}>
            <div className={styles.desktopSidebar}>
              <YouMightAlsoLike />

              <div className={styles.desktopSidebarCard}>
                <SpecialRequestCard />
              </div>

              <div
                className={styles.desktopSidebarCard}
                style={{ "--animation-order": 1 } as React.CSSProperties}
              >
                <CouponCard />
              </div>

              {orderType === "pickup" && <CarPlateCard />}

              {(orderType === "delivery" || orderType === "pickup") && (
                <TimeEstimateCard />
              )}

              <div
                className={styles.desktopSidebarCard}
                style={{ "--animation-order": 1 } as React.CSSProperties}
              >
                <RewardWaiterCard />
              </div>

              {/* Table Number */}
              {orderType === "dine-in" && (
                <div
                  className={styles.desktopSidebarCard}
                  style={{ "--animation-order": 3 } as React.CSSProperties}
                >
                  <TableNumberCard />
                </div>
              )}

              {/* Order Summary */}
              <Card
                className={`${styles.desktopOrderSummary} ${styles.desktopSidebarCard}`}
              >
                <OrderSummary />
              </Card>
            </div>
          </Col>
        </Row>
      </div>
    </>
  );
}