import { Button, Card, Divider } from "antd";
import Ads2 from "components/Ads/Ads2";
import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet";
import Fascano50X50Icon from "components/Icons/fascano/Fascano50X50Icon";
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 { useTranslation } from "react-i18next";
import Stepper from "./components/Stepper";
import styles from "./order.module.css";

export default function OrderPage() {
  const { t } = useTranslation();

  // const subtotal = getTotal();
  // const tax = subtotal * 0.1; // 10% tax
  // const total = subtotal + tax;

  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)",
              }}
            >
              <Fascano50X50Icon className={styles.fascanoIcon} />
            </Button>
            <div>
              <ProText style={{ fontSize: "1rem" }}>
                {t("order.yourOrderFromFascanoRestaurant")}
              </ProText>
              <br />
              <ProText type="secondary">
                <LocationIcon className={styles.locationIcon} />{" "}
                {t("order.muscat")}
              </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" }}>
                #A54363
              </ProText>
              <TimeIcon className={styles.timeIcon} />
              <ProText type="secondary" style={{ fontSize: "14px" }}>
                ordered :- Today - 13:55 PM
              </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" }}
          >
            {[
              { id: 1, name: "Lazord Grill - half kilo" },
              { id: 2, name: "Lazord Grill - half kilo" },
              { id: 3, name: "Lazord Grill - half kilo" },
            ].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 />

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