import { Button, Card } from "antd";
import { GoogleMap } from "components/CustomBottomSheet/GoogleMap";
import { MapBottomSheet } from "components/CustomBottomSheet/MapBottomSheet";
import ProText from "components/ProText";
import { selectCart, updateLocation } from "features/order/orderSlice";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";

interface LocationData {
  lat: number;
  lng: number;
  address: string;
}

export const AddressSummary = () => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { location } = useAppSelector(selectCart);
  const [isMapBottomSheetOpen, setIsMapBottomSheetOpen] = useState(false);
  const { orderType } = useAppSelector(selectCart); // Default to delivery for now

  const handleLocationSave = useCallback(
    (locationString: string) => {
      try {
        const locationData = JSON.parse(locationString) as LocationData;
        dispatch(updateLocation(locationData));
      } catch (error) {
        console.error("Failed to parse location data:", error);
      }
    },
    [dispatch],
  );

  const handleMapBottomSheetOpen = useCallback(() => {
    setIsMapBottomSheetOpen(true);
  }, []);

  const handleMapBottomSheetClose = useCallback(() => {
    setIsMapBottomSheetOpen(false);
  }, []);

  const initialValue = useMemo(
    () => (location ? JSON.stringify(location) : ""),
    [location],
  );

  const shouldRender = useMemo(
    () => orderType === OrderType.Delivery,
    [orderType],
  );

  if (!shouldRender) {
    return null;
  }

  return (
    <>
      <Card
        title={t("address.locationDetails")}
        extra={
          <Button
            type="primary"
            size="small"
            onClick={handleMapBottomSheetOpen}
            style={{
              boxShadow: "none",
            }}
          >
            {location
              ? t("address.changeLocation")
              : t("address.selectLocation")}
          </Button>
        }
        className={styles.addressCard}
      >
        {!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>
        )}
      </Card>

      <MapBottomSheet
        isOpen={isMapBottomSheetOpen}
        onClose={handleMapBottomSheetClose}
        initialValue={initialValue}
        onSave={handleLocationSave}
      />
    </>
  );
};
