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',
    },
  },
}