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 ProInputCard from "components/ProInputCard/ProInputCard.tsx";
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={500}
      snapPoints={["60vh"]}
      showCloseButton={false}
    >
      <div style={{ padding: "16px 0", position: "relative" }}>
        {/* Order Type */}
        <ProInputCard
          title={t("orderDetails.fulfillmentType")}
          dividerStyle={{ margin: "5px 0 0 0" }}
        >
          <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"
          />
        </ProInputCard>
        <ProInputCard
          title={t("orderDetails.location")}
          dividerStyle={{ margin: "5px 0 0 0" }}
        >
          {!location ? (
            <div className={styles.noLocationContainer}>
              <ProText type="secondary">
                {t("address.noLocationSelected")}
              </ProText>
              <br />
              <ProText type="secondary" className={styles.smallTextStyle}>
                {t("address.clickEditToSelect")}
              </ProText>
            </div>
          ) : (
            <div className={styles.mapContainer}>
              <GoogleMap
                readOnly={true}
                initialLocation={location}
                height="160px"
              />
            </div>
          )}
        </ProInputCard>
        <ProInputCard
          title={t("orderDetails.pickupTime")}
          dividerStyle={{ margin: "5px 0 0 0" }}
        >
          <div className={styles.noLocationContainer}>
            <ProText type="secondary">
              {t("address.noLocationSelected")}
            </ProText>
            <br />
            <ProText type="secondary" className={styles.smallTextStyle}>
              {t("address.clickEditToSelect")}
            </ProText>
          </div>
        </ProInputCard>
        <Button type="primary" className={styles.saveButton}>
          {t("orderDetails.save")}
        </Button>
      </div>
    </ProBottomSheet>
  );
}