import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import { useAppSelector } from "redux/hooks";
import ProText from "components/ProText";
import { OrderType } from "pages/checkout/hooks/types";

interface OrderDetailsBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

export function OrderDetailsBottomSheet({
  isOpen,
  onClose,
}: OrderDetailsBottomSheetProps) {
  const { t } = useTranslation();
  const { orderType, restaurant, specialRequest, items } = useAppSelector(
    (state) => state.order,
  );
  // const { isRTL } = useAppSelector((state) => state.locale);

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
      title={t("Order Details")}
      height={500}
      snapPoints={["60vh"]}
    >
      <div style={{ padding: "16px 0" }}>
        {/* Order Type */}
        <div style={{ marginBottom: 16 }}>
          <ProText style={{ fontSize: 18, fontWeight: 600 }}>
            {t("Order Type")}: {orderType && t(orderType)}
          </ProText>
        </div>

        {/* Items List */}
        <div style={{ marginBottom: 16 }}>
          <ProText style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
            {t("Items")}
          </ProText>
          {items.length > 0 ? (
            <div>
              {items.map((item) => (
                <div
                  key={item.id}
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    marginBottom: 8,
                    padding: "8px 0",
                    borderBottom: "1px solid #eee",
                  }}
                >
                  <div>
                    <ProText style={{ fontWeight: 500 }}>
                      {item.quantity} x {item.name}
                    </ProText>
                  </div>
                  <ProText style={{ fontWeight: 500 }}>{}</ProText>
                </div>
              ))}
            </div>
          ) : (
            <ProText>{t("No items in cart")}</ProText>
          )}
        </div>

        {/* Special Request */}
        {specialRequest && (
          <div style={{ marginBottom: 16 }}>
            <ProText style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
              {t("Special Request")}
            </ProText>
            <ProText>{specialRequest}</ProText>
          </div>
        )}

        {/* Order Summary */}
        <div style={{ marginTop: 24 }}>
          <ProText style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
            {t("Order Summary")}
          </ProText>

          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginBottom: 8,
            }}
          >
            <ProText>{t("Subtotal")}</ProText>
            <ProText>{}</ProText>
          </div>

          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginBottom: 8,
            }}
          >
            <ProText>{t("Tax")}</ProText>
            <ProText>{}</ProText>
          </div>

          {orderType !== OrderType.DineIn && restaurant?.delivery_fees && (
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginBottom: 8,
              }}
            >
              <ProText>{t("Delivery Fee")}</ProText>
              <ProText>{Number(restaurant.delivery_fees)}</ProText>
            </div>
          )}

          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginTop: 16,
              paddingTop: 16,
              borderTop: "1px solid #eee",
              fontWeight: 600,
            }}
          >
            <ProText style={{ fontWeight: 600 }}>{t("Total")}</ProText>
            <ProText style={{ fontWeight: 600 }}>{}</ProText>
          </div>
        </div>
      </div>
    </ProBottomSheet>
  );
}