import type { Meta, StoryObj } from '@storybook/vue3-vite';
import UiSpinner from './UiSpinner.vue';

/**
 * UiSpinner is a circular animated indicator for indeterminate, in-progress operations.
 * Use it inline (for example inside a button) or centered in a region while content loads; for percentage-known progress, use `UiProgress`.
 */
const meta: Meta<typeof UiSpinner> = {
  title: 'Components/UiSpinner',
  component: UiSpinner,
  tags: ['autodocs'],
  argTypes: {
    ariaLabel: {
      control: 'text',
      description:
        'Accessible label for the spinner (announced by screen readers)',
    },
    class: {
      control: 'text',
      description: 'Additional CSS classes to apply to the spinner',
    },
  },
  args: {
    ariaLabel: 'Loading',
  },
};

export default meta;

type Story = StoryObj<typeof UiSpinner>;

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

<template>
  <UiSpinner />
</template>`;

/**
 * Default spinner with standard size.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiSpinner },
    setup() {
      return { args };
    },
    template: '<UiSpinner :aria-label="args.ariaLabel" :class="args.class" />',
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const sizesTemplateSource = `<script setup lang="ts">
import { UiSpinner } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex items-end gap-6">
    <div class="flex flex-col items-center gap-2">
      <span class="text-muted-foreground text-xs">default</span>
      <UiSpinner />
    </div>
    <div class="flex flex-col items-center gap-2">
      <span class="text-muted-foreground text-xs">size-6</span>
      <UiSpinner class="size-6" />
    </div>
    <div class="flex flex-col items-center gap-2">
      <span class="text-muted-foreground text-xs">size-8</span>
      <UiSpinner class="size-8" />
    </div>
    <div class="flex flex-col items-center gap-2">
      <span class="text-muted-foreground text-xs">size-12</span>
      <UiSpinner class="size-12" />
    </div>
  </div>
</template>`;

/**
 * Spinner sizes using Tailwind classes. Default is size-4.
 */
export const Sizes: Story = {
  render: () => ({
    components: { UiSpinner },
    template: `<div class="flex items-end gap-6">
      <div class="flex flex-col items-center gap-2">
        <span class="text-muted-foreground text-xs">default</span>
        <UiSpinner />
      </div>
      <div class="flex flex-col items-center gap-2">
        <span class="text-muted-foreground text-xs">size-6</span>
        <UiSpinner class="size-6" />
      </div>
      <div class="flex flex-col items-center gap-2">
        <span class="text-muted-foreground text-xs">size-8</span>
        <UiSpinner class="size-8" />
      </div>
      <div class="flex flex-col items-center gap-2">
        <span class="text-muted-foreground text-xs">size-12</span>
        <UiSpinner class="size-12" />
      </div>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: sizesTemplateSource,
      },
    },
  },
};

const inlineTemplateSource = `<script setup lang="ts">
import { UiSpinner } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex items-center gap-2">
    <UiSpinner />
    <span>Loading...</span>
  </div>
</template>`;

/**
 * Spinner used inline with text.
 */
export const InlineWithText: Story = {
  render: () => ({
    components: { UiSpinner },
    template: `<div class="flex items-center gap-2">
      <UiSpinner />
      <span>Loading...</span>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: inlineTemplateSource,
      },
    },
  },
};
