import type { Meta, StoryObj } from "@storybook/nextjs-vite"
import { Alert } from "./index"
import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
import { expect, fn } from "storybook/test"

const meta: Meta<typeof Alert> = {
  title: "Core Components/Alert",
  component: Alert,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["banner", "inline"],
    },
    type: {
      control: { type: "select" },
      options: Object.values(AlertTypeEnum),
    },
    close: {
      table: {
        disable: true,
      },
    },
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    variant: "inline",
    type: AlertTypeEnum.Info,
    heading: "Heading",
    text: "Caramels danish jelly-o pudding tart croissant. Pie cotton candy jujubes carrot cake gummies. Apple pie cake chocolate bar halvah tootsie roll bonbon cheesecake. Brownie dessert macaroon bear claw pastry.",
    close: undefined,
    ariaRole: "alert",
  },
  play: async ({ canvas }) => {
    canvas.findByRole("alert")
  },
}

export const Closable: Story = {
  args: {
    variant: "inline",
    type: AlertTypeEnum.Info,
    heading: "Heading",
    text: "Caramels danish jelly-o pudding tart croissant. Pie cotton candy jujubes carrot cake gummies. Apple pie cake chocolate bar halvah tootsie roll bonbon cheesecake. Brownie dessert macaroon bear claw pastry.",
    close: fn(),
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.close).toHaveBeenCalledTimes(1)
  },
}

export const WithPhonenumber: Story = {
  args: {
    variant: "inline",
    type: AlertTypeEnum.Info,
    heading: "Heading",
    text: "Caramels danish jelly-o pudding tart croissant. Pie cotton candy jujubes carrot cake gummies. Apple pie cake chocolate bar halvah tootsie roll bonbon cheesecake. Brownie dessert macaroon bear claw pastry.",
    close: fn(),
    phoneContact: {
      displayText: "Call us:",
      phoneNumber: "+4685551234",
      footnote: "Available 24/7",
    },
  },
}