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

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

import { selectCart } from "features/order/orderSlice.ts";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks.ts";
import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
import CouponCard from "pages/cart/components/CouponCard.tsx";
import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
import YouMightAlsoLike from "pages/cart/components/YouMightAlsoLike.tsx";
import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";

export default function CartDesktopLayout() {
  const { t } = useTranslation();
  const { items } = useAppSelector(selectCart);
  const orderType = localStorage.getItem("orderType");

  return (
    <>
      <div className={`${styles.cartContainer} ${styles.desktopCartContainer}`}>
        <Row gutter={[40, 40]} style={{ width: "100%" }}>
          {/* Main Content Column */}
          <Col xs={24} lg={16} xl={17}>
            <div className={styles.desktopMainContent}>
              {/* <div className={styles.desktopRecommendationsSection}>
                  <YouMightAlsoLike />
                </div> */}

              {/* Cart Items Section */}
              <div className={styles.desktopCartItemsSection}>
                <div className={styles.desktopSectionHeader}>
                  <ProTitle
                    level={3}
                    style={{ marginBottom: "8px", color: colors.primary }}
                  >
                    {t("cartItems")} ({items.length})
                  </ProTitle>
                  <ProText type="secondary" style={{ fontSize: "16px" }}>
                    {items.length === 0
                      ? t("emptyCart")
                      : `${items.length} ${
                          items.length === 1 ? t("item") : t("items")
                        } ${t("inYourCart")}`}
                  </ProText>
                </div>

                {items.length === 0 ? (
                  <div className={styles.desktopEmptyCart}>
                    <div className={styles.desktopEmptyCartIcon}>
                      <EmptyOrdersIcon />
                    </div>
                    <ProTitle
                      level={4}
                      style={{ marginBottom: "16px", color: colors.primary }}
                    >
                      {t("emptyCart")}
                    </ProTitle>
                    <ProText
                      type="secondary"
                      style={{ marginBottom: "24px", fontSize: "16px" }}
                    >
                      {t("emptyCartMessage")}
                    </ProText>
                    <Link to="/menu">
                      <Button
                        type="primary"
                        size="large"
                        style={{ borderRadius: "12px", height: "48px" }}
                      >
                        {t("cart.browseMenu")}
                      </Button>
                    </Link>
                  </div>
                ) : (
                  <div className={styles.desktopCartItems}>
                    {items.map((item, index) => (
                      <Card
                        key={item.id}
                        hoverable
                        className={`${styles.desktopCartItem} desktop`}
                        styles={{
                          body: {
                            padding: "28px",
                            borderRadius: 24,
                          },
                        }}
                        style={
                          {
                            "--animation-order": index,
                          } as React.CSSProperties
                        }
                      >
                        <Row gutter={[28, 20]} align="middle">
                          <Col xs={24} sm={8} md={6}>
                            <div className={styles.desktopImageContainer}>
                              <ImageWithFallback
                                src={item.image}
                                alt={item.name}
                                className={styles.desktopMenuItemImage}
                                style={{
                                  width: 140,
                                  height: 140,
                                }}
                                fallbackSrc={
                                  "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
                                }
                              />
                            </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>
                      </Card>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </Col>

          {/* Sidebar Column */}
          <Col xs={24} lg={8} xl={7}>
            <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}`}
                style={{ "--animation-order": 4 } as React.CSSProperties}
              >
                <OrderSummary />
              </Card>
            </div>
          </Col>
        </Row>

        <CartFooter />
      </div>
    </>
  );
}