import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { HotelCard } from './index'

import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
import { fn } from 'storybook/test'
import { Button } from '../Button'
import { MaterialIcon } from '../Icons/MaterialIcon'

const meta: Meta<typeof HotelCard> = {
  title: 'Components/HotelCard',
  component: HotelCard,
  argTypes: {
    state: {
      control: {
        type: 'select',
        options: ['default', 'active'],
      },
    },
    type: {
      control: {
        type: 'select',
        options: ['mapListing', 'pageListing'],
      },
    },
  },
}

export default meta

type Story = StoryObj<typeof HotelCard>

export const Default: Story = {
  args: {
    hotel: {
      id: '1',
      name: 'Test Hotel',
      address: { streetAddress: '123 Test Street', city: 'Test City' },
      description: 'A great place to stay.',
      hotelType: 'signature',
      detailedFacilities: [],
      ratings: {
        tripAdvisor: 4,
      },
    },
    prices: {
      public: {
        rateType: RateTypeEnum.Regular,
        localPrice: {
          currency: 'SEK',
          pricePerNight: 1000,
          pricePerStay: 1000,
        },
      },
      member: {
        rateType: RateTypeEnum.Regular,
        localPrice: {
          currency: 'SEK',
          pricePerNight: 800,
          pricePerStay: 800,
        },
      },
    },
    state: 'default',
    isAlternative: false,
    isPartnerBrand: false,
    type: 'pageListing',
    isUserLoggedIn: false,
    distanceToCityCenter: 0,
    bookingCode: 'ABC123',
    images: [
      {
        src: 'img/img2.jpg',
        alt: 'Alt text',
        caption: 'Caption',
      },
    ],

    belowInfoSlot: (
      <Button
        onPress={() => fn()}
        variant="Text"
        typography="Body/Paragraph/mdBold"
      >
        Read more
        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
      </Button>
    ),
    onAddressClick: fn,
    onHover: fn,
    onHoverEnd: fn,
    onFocusIn: fn,
    onFocusOut: fn,
  },
}

export const MapListing: Story = {
  args: {
    ...Default.args,
    type: 'mapListing',
  },
}

export const WithoutImage: Story = {
  args: {
    ...Default.args,
    images: [],
  },
}