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: 'Components/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>
    )
  },
}