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: "Product Components/HotelCard/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">
        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: [],
  },
}