import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import { useAppSelector } from "redux/hooks.ts";
import ProText from "components/ProText.tsx";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { Segmented, Button } from "antd";

import DineInIcon from "./icons/dineIn.svg?react";
import DeliveryIcon from "./icons/delivery.svg?react";
import PickupIcon from "./icons/pickup.svg?react";
import styles from "./OrderDetailsBottomSheet.module.css";
import { GoogleMap } from "components/CustomBottomSheet/GoogleMap.tsx";

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

export function OrderDetailsBottomSheet({
  isOpen,
  onClose,
}: OrderDetailsBottomSheetProps) {
  const { t } = useTranslation();
  const { orderType, location } = useAppSelector((state) => state.order);

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
      title={t("orderDetails.title")}
      height="70vh"
      snapPoints={["70vh"]}
      showCloseButton={false}
    >
      <div className={styles.container}>
        {/* Order Type */}

        <div className={styles.sectionTitle}>
          {t("orderDetails.fulfillmentType")}
        </div>
        <div className={styles.segmentedContent}>
          <Segmented
            options={[
              {
                value: OrderType.DineIn,
                label: t("orderTypes.dine-in"),
                icon: <DineInIcon />,
              },
              {
                value: OrderType.Pickup,
                label: t("orderTypes.pickup"),
                icon: <PickupIcon />,
              },
              {
                value: OrderType.Delivery,
                label: t("orderTypes.delivery"),
                icon: <DeliveryIcon />,
              },
            ]}
            value={orderType}
            size="small"
            block
          />
        </div>
        <div className={styles.sectionTitle}>{t("orderDetails.location")}</div>
        <div className={styles.sectionContent}>
          {!location ? (
            <div className={styles.noLocationContainer}>
              <ProText type="secondary">
                {t("address.noLocationSelected")}
              </ProText>
              <ProText type="secondary" className={styles.smallTextStyle}>
                {t("address.clickEditToSelect")}
              </ProText>
            </div>
          ) : (
            <div className={styles.mapContainer}>
              <GoogleMap
                readOnly={true}
                initialLocation={location}
                height="100%"
              />
            </div>
          )}
        </div>
        <div className={styles.sectionTitle}>
          {t("orderDetails.pickupTime")}
        </div>
        <div className={styles.sectionContent}>
          <div className={styles.noLocationContainer}>
            <ProText type="secondary">
              {t("address.noLocationSelected")}
            </ProText>
            <ProText type="secondary" className={styles.smallTextStyle}>
              {t("address.clickEditToSelect")}
            </ProText>
          </div>
        </div>
        <Button type="primary" className={styles.saveButton}>
          {t("orderDetails.save")}
        </Button>
      </div>
    </ProBottomSheet>
  );
}
