import { Button, Card, Form, Layout } from "antd";
import { useGetOrderDetailsQuery } from "redux/api/others";
import styles from "./OrderDetails.module.css";
import ProHeader from "components/ProHeader/ProHeader";
import { useTranslation } from "react-i18next";

import { useNavigate, useParams } from "react-router-dom";
import ProductChoicesCard from "components/productChoicesCard/ProductChoicesCard.tsx";

export default function OrderDetails() {
  const { orderId } = useParams();
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { data: orderDetails } = useGetOrderDetailsQuery(
    {
      orderID: orderId || "",
      restaurantID: localStorage.getItem("restaurantID") || "",
    },
    {
      skip: !orderId,
    },
  );

  return (
    <Form layout="vertical">
      <Layout>
        <ProHeader>{t("order.yourOrder")}</ProHeader>
        <Layout.Content className={styles.orderDetailsContainer}>
          <Card className={styles.cartItem}>
            {orderDetails?.orderItems.map((item, index) => (
              <ProductChoicesCard
                key={index}
                product={{ ...item, type: "OrderItem" }}
                addDividerAfter={index !== orderDetails?.orderItems.length - 1}
              />
            ))}
          </Card>
        </Layout.Content>

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