import { Button, Card, Divider, Form, Layout, Space } from "antd";
import { useGetOrderDetailsQuery } from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import styles from "./OrderDetails.module.css";
import ProHeader from "components/ProHeader/ProHeader";
import { useTranslation } from "react-i18next";
import ProText from "components/ProText";
import useBreakPoint from "hooks/useBreakPoint";
import ImageWithFallback from "components/ImageWithFallback";
import { useParams } from "react-router-dom";

export default function OrderDetails() {
  const { orderId } = useParams();
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  const { isMobile, isTablet } = useBreakPoint();

  const { data: orderDetails } = useGetOrderDetailsQuery(
    {
      orderID: orderId || "",
      restaurantID: localStorage.getItem("restaurantID") || "",
    },
    {
      skip: !orderId,
    },
  );

  const getMenuItemImageStyle = () => {
    if (isMobile) {
      return {
        width: 115,
        height: 96,
      };
    }
    return {
      width: 120,
      height: 120,
    };
  };

  return (
    <Form layout="vertical">
      <Layout>
        <ProHeader>{t("order.yourOrder")}</ProHeader>
        <Layout.Content className={styles.orderDetailsContainer}>
          <Card className={styles.cartItem}>
            {orderDetails?.orderItems.map((item: any, index: number) => (
              <div key={index} style={{ position: "relative" }}>
                <Space
                  size="middle"
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    height: "100%",
                    padding: 8,
                  }}
                >
                  <Space orientation="vertical" size="small">
                    <div
                      style={{
                        position: "absolute",
                        top: 8,
                        [isRTL ? "right" : "left"]: 8,
                      }}
                    >
                      <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"
                        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 !== orderDetails?.orderItems?.length - 1
                            ? 20
                            : 7,
                        [isRTL ? "right" : "left"]: 8,
                      }}
                    >
                      <Button
                        shape="circle"
                        iconPlacement="start"
                        size="small"
                        className={styles.addButton}
                        style={{
                          background: "#F5F5F6",
                          width: 28,
                          height: 28,
                          border: "none",
                        }}
                      >
                        <ProText style={{ color: "#1F1C2E" }}>
                          {item.qty}{" "}
                        </ProText>
                      </Button>
                    </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>
                </Space>

                {index !== orderDetails?.orderItems?.length - 1 && (
                  <Divider style={{ margin: "16px 0" }} />
                )}
              </div>
            ))}
          </Card>
        </Layout.Content>

        <Layout.Footer className={styles.orderDetailsButtonContainer}>
          <Button
            type="primary"
            shape="round"
            className={styles.button}
            onClick={() => {}}
          >
            {t("order.done")}
          </Button>
        </Layout.Footer>
      </Layout>
    </Form>
  );
}