import { Button, Card, Divider, Image } from "antd";
import Ads2 from "components/Ads/Ads2";
import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet";
import LocationIcon from "components/Icons/LocationIcon";
import InvoiceIcon from "components/Icons/order/InvoiceIcon";
import TimeIcon from "components/Icons/order/TimeIcon";
import OrderDishIcon from "components/Icons/OrderDishIcon";
import PaymentDetails from "components/PaymentDetails/PaymentDetails";
import ProHeader from "components/ProHeader/ProHeader";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import dayjs from "dayjs";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { useGetOrderDetailsQuery } from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import Stepper from "./components/Stepper";
import styles from "./order.module.css";

export default function OrderPage() {
  const { t } = useTranslation();
  const { orderId } = useParams();
  const { isRTL } = useAppSelector((state) => state.locale);

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

  return (
    <>
      <ProHeader>{t("order.title")}</ProHeader>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          height: "92vh",
          padding: 16,
          gap: 16,
          overflow: "auto",
          scrollbarWidth: "none",
        }}
      >
        <Card className={styles.orderCard}>
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              gap: "1rem",
              backgroundColor: "rgba(255, 183, 0, 0.08)",
              borderRadius: "12px",
              padding: 16,
            }}
          >
            <Button
              type="text"
              shape="circle"
              style={{
                backgroundColor: "rgba(255, 183, 0, 0.08)",
              }}
            >
              <Image
                src={orderDetails?.restaurant_iimage}
                className={styles.profileImage}
                width={50}
                height={50}
                preview={false}
              />
            </Button>
            <div>
              <ProText style={{ fontSize: "1rem" }}>
                {t("order.yourOrderFromFascanoRestaurant")}
              </ProText>
              <br />
              <ProText type="secondary">
                <LocationIcon className={styles.locationIcon} />{" "}
                {isRTL ? orderDetails?.restaurantAR : orderDetails?.restaurant}
              </ProText>
            </div>
          </div>

          <OrderDishIcon className={styles.orderDishIcon} />

          <div>
            <ProTitle
              level={5}
              style={{
                fontWeight: 600,
                fontSize: "18px",
                marginBottom: "0.75rem",
              }}
            >
              {t("order.inProgressOrder")} (1)
            </ProTitle>
            <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
              <InvoiceIcon className={styles.invoiceIcon} />
              <ProText type="secondary" style={{ fontSize: "14px" }}>
                #{orderDetails?.order.id}
              </ProText>
              <TimeIcon className={styles.timeIcon} />
              <ProText type="secondary" style={{ fontSize: "14px" }}>
                ordered :- Today -{" "}
                {dayjs(orderDetails?.status[0]?.pivot?.created_at).format(
                  "h:mm A",
                )}
              </ProText>
            </div>

            <Divider style={{ margin: "12px 0" }} />

            <Stepper />
          </div>
        </Card>

        <Ads2 />

        <ProInputCard
          title={
            <div style={{ marginBottom: 7 }}>
              <ProText style={{ fontSize: "1rem" }}>
                {t("order.yourOrderFrom")}
              </ProText>
              <br />
              <ProText type="secondary">
                <LocationIcon className={styles.locationIcon} />{" "}
                {t("order.muscat")}
              </ProText>
            </div>
          }
        >
          <div
            style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
          >
            {orderDetails?.orderItems.map((item, index) => (
              <div key={item.id}>
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "flex-start",
                    gap: "1rem",
                  }}
                >
                  <Button
                    type="text"
                    shape="circle"
                    style={{
                      backgroundColor: "rgba(255, 183, 0, 0.08)",
                    }}
                  >
                    {index + 1}X
                  </Button>
                  <div>
                    <ProText
                      style={{ fontSize: "1rem", position: "relative", top: 8 }}
                    >
                      {item.name}
                    </ProText>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </ProInputCard>

        <PaymentDetails order={orderDetails?.order} />

        <CancelOrderBottomSheet />
      </div>
    </>
  );
}
