import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { UiAlert, UiAlertDescription, UiAlertTitle } from './index';
import { AlertVariants } from './constants';

/**
 * UiAlert is a static, contextual message that calls attention to status information (info, success, warning, destructive).
 * Use it for inline page-level feedback that should remain visible until the user dismisses or resolves it.
 * For transient confirmations or blocking confirmations, use a toast or `UiAlertDialog` instead.
 */
const meta: Meta<typeof UiAlert> = {
  title: 'Components/UiAlert',
  component: UiAlert,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: AlertVariants,
      description: 'The visual style of the alert',
    },
  },
  args: {
    variant: 'default',
  },
};

export default meta;

type Story = StoryObj<typeof UiAlert>;

const defaultTemplateSource = `<script setup lang="ts">
import { UiAlert, UiAlertDescription, UiAlertTitle } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAlert>
    <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
    <UiAlertDescription>
      This is an alert with icon, title and description.
    </UiAlertDescription>
  </UiAlert>
</template>`;

/**
 * Default alert with icon, title and description.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiAlert,
      UiAlertDescription,
      UiAlertTitle,
    },
    setup() {
      return { args };
    },
    template: `
      <UiAlert :variant="args.variant">
        <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
        <UiAlertDescription>
          This is an alert with icon, title and description.
        </UiAlertDescription>
      </UiAlert>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const destructiveTemplateSource = `<script setup lang="ts">
import { UiAlert, UiAlertDescription, UiAlertTitle } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAlert variant="destructive">
    <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
    <UiAlertDescription>
      <p>Please verify your billing information and try again.</p>
      <ul class="mt-2 list-inside list-disc gap-y-1">
        <li>Check your card details</li>
        <li>Ensure sufficient funds</li>
        <li>Verify billing address</li>
      </ul>
    </UiAlertDescription>
  </UiAlert>
</template>`;

/**
 * Destructive alert variant for errors or critical warnings.
 */
export const Destructive: Story = {
  render: () => ({
    components: {
      UiAlert,
      UiAlertDescription,
      UiAlertTitle,
    },
    template: `
      <UiAlert variant="destructive">
        <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
        <UiAlertDescription>
          <p>Please verify your billing information and try again.</p>
          <ul class="mt-2 list-inside list-disc gap-y-1">
            <li>Check your card details</li>
            <li>Ensure sufficient funds</li>
            <li>Verify billing address</li>
          </ul>
        </UiAlertDescription>
      </UiAlert>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: destructiveTemplateSource,
      },
    },
  },
};

const allVariantsTemplateSource = `<script setup lang="ts">
import { UiAlert, UiAlertDescription, UiAlertTitle } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex flex-col gap-4">
    <UiAlert>
      <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
      <UiAlertDescription>
        This is an alert with icon, title and description.
      </UiAlertDescription>
    </UiAlert>

    <UiAlert variant="destructive">
      <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
      <UiAlertDescription>
        <p>Please verify your billing information and try again.</p>
        <ul class="mt-2 list-inside list-disc gap-y-1">
          <li>Check your card details</li>
          <li>Ensure sufficient funds</li>
          <li>Verify billing address</li>
        </ul>
      </UiAlertDescription>
    </UiAlert>
  </div>
</template>`;

/**
 * All available alert variants side by side.
 */
export const AllVariants: Story = {
  render: () => ({
    components: {
      UiAlert,
      UiAlertDescription,
      UiAlertTitle,
    },
    template: `
      <div class="flex flex-col gap-4">
        <UiAlert>
          <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
          <UiAlertDescription>
            This is an alert with icon, title and description.
          </UiAlertDescription>
        </UiAlert>

        <UiAlert variant="destructive">
          <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
          <UiAlertDescription>
            <p>Please verify your billing information and try again.</p>
            <ul class="mt-2 list-inside list-disc gap-y-1">
              <li>Check your card details</li>
              <li>Ensure sufficient funds</li>
              <li>Verify billing address</li>
            </ul>
          </UiAlertDescription>
        </UiAlert>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: allVariantsTemplateSource,
      },
    },
  },
};
