web/packages/design-system/lib/components/Map/InteractiveMap/InteractiveMap.stories.tsx

import type { Meta, StoryObj } from "@storybook/nextjs-vite"

// import { expect, fn } from 'storybook/test'
import { Lang } from "@scandic-hotels/common/constants/language"
import { APIProvider } from "@vis.gl/react-google-maps"
import { useState } from "react"
import { InteractiveMap } from "."
import { hotelPins } from "./storybookData"

const meta: Meta<typeof InteractiveMap> = {
  title: "Patterns/Map/Interactive Map",
  component: InteractiveMap,
  argTypes: {},
}

export default meta

type Story = StoryObj<typeof InteractiveMap>

export const PrimaryDefault: Story = {
  args: {
    lang: Lang.en,
    hotelPins,
    isUserLoggedIn: false,
    coordinates: {
      lat: 59.32644916839965,
      lng: 18.067759400301135,
    },
  },
  render: (args) => {
    const mapKey = import.meta.env.VITE_GOOGLE_STATIC_MAP_KEY
    const mapId = import.meta.env.VITE_GOOGLE_DYNAMIC_MAP_ID
    if (!mapKey || !mapId) {
      throw new Error(
        "VITE_GOOGLE_STATIC_MAP_KEY or VITE_GOOGLE_DYNAMIC_MAP_ID is not defined in your .env file. Please add it to run this story."
      )
    }

    const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>()
    const [activeHotelPin, setActiveHotelPin] = useState<string | null>()

    return (
      <APIProvider apiKey={mapKey}>
        <div
          style={
            {
              "--hotel-map-height": "300px",
              height: "max(500px, 90vh)",
            } as React.CSSProperties
          }
        >
          <InteractiveMap
            {...args}
            mapId={mapId}
            hoveredHotelPin={hoveredHotelPin}
            onHoverHotelPin={(args) => {
              setHoveredHotelPin(args?.hotelName ?? null)
            }}
            activeHotelPin={activeHotelPin}
            onSetActiveHotelPin={(args) => {
              setActiveHotelPin(args?.hotelName ?? null)
            }}
          />
        </div>
      </APIProvider>
    )
  },
}