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

/**
 * UiSkeleton is a neutral placeholder shape that mimics the size of incoming content while it is loading.
 * Use it to reduce layout shift and signal that data is on its way; for indeterminate progress on actions, use `UiSpinner`.
 */
const meta: Meta<typeof UiSkeleton> = {
  title: 'Components/UiSkeleton',
  component: UiSkeleton,
  tags: ['autodocs'],
  argTypes: {
    width: {
      control: 'text',
      description: 'Custom width for the skeleton. @default undefined',
    },
    height: {
      control: 'text',
      description: 'Custom height for the skeleton. @default undefined',
    },
    rounded: {
      control: 'boolean',
      description: 'Whether to render as a rounded. @default false',
    },
  },
  args: {
    rounded: false,
  },
};

export default meta;

type Story = StoryObj<typeof UiSkeleton>;

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

<template>
  <div class="flex items-center gap-x-4">
    <UiSkeleton class="h-12 w-12" rounded />
    <div class="gap-y-2">
      <UiSkeleton class="h-4 w-[250px]" />
      <UiSkeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>`;

/**
 * Default skeleton with avatar and text lines.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiSkeleton },
    setup() {
      return { args };
    },
    template: `<div class="flex items-center gap-x-4">
      <UiSkeleton class="h-12 w-12" v-bind="args" />
      <div class="gap-y-2">
        <UiSkeleton class="h-4 w-[250px]" />
        <UiSkeleton class="h-4 w-[200px]" />
      </div>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

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

<template>
  <div class="flex flex-col gap-y-3">
    <UiSkeleton class="h-[125px] w-[250px] rounded-xl" />
    <div class="gap-y-2">
      <UiSkeleton class="h-4 w-[250px]" />
      <UiSkeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>`;

/**
 * Card skeleton with image placeholder.
 */
export const Card: Story = {
  render: (args) => ({
    components: { UiSkeleton },
    setup() {
      return { args };
    },
    template: `<div class="flex flex-col gap-y-3">
      <UiSkeleton class="h-[125px] w-[250px] rounded-xl" />
      <div class="gap-y-2">
        <UiSkeleton class="h-4 w-[250px]" />
        <UiSkeleton class="h-4 w-[200px]" />
      </div>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: cardTemplateSource,
      },
    },
  },
};

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

<template>
  <div class="gap-y-2">
    <UiSkeleton class="h-4 w-full" />
    <UiSkeleton class="h-4 w-full" />
    <UiSkeleton class="h-4 w-3/4" />
  </div>
</template>`;

/**
 * Text paragraph skeleton.
 */
export const TextBlock: Story = {
  render: (args) => ({
    components: { UiSkeleton },
    setup() {
      return { args };
    },
    template: `<div class="gap-y-2 w-[300px]">
      <UiSkeleton class="h-4 w-full" />
      <UiSkeleton class="h-4 w-full" />
      <UiSkeleton class="h-4 w-3/4" />
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: textTemplateSource,
      },
    },
  },
};

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

<template>
  <div class="flex gap-x-2">
    <UiSkeleton class="h-10 w-10" rounded />
    <UiSkeleton class="h-10 w-10" rounded />
    <UiSkeleton class="h-10 w-10" rounded />
  </div>
</template>`;

/**
 * Avatar skeleton roundeds.
 */
export const Avatars: Story = {
  render: (args) => ({
    components: { UiSkeleton },
    setup() {
      return { args };
    },
    template: `<div class="flex gap-x-2">
      <UiSkeleton class="h-10 w-10" rounded />
      <UiSkeleton class="h-10 w-10" rounded />
      <UiSkeleton class="h-10 w-10" rounded />
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: avatarTemplateSource,
      },
    },
  },
};

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

<template>
  <div class="gap-y-4">
    <div class="flex gap-x-4">
      <UiSkeleton class="h-8 w-[100px]" />
      <UiSkeleton class="h-8 w-[150px]" />
      <UiSkeleton class="h-8 w-[100px]" />
      <UiSkeleton class="h-8 w-[80px]" />
    </div>
    <div class="flex gap-x-4">
      <UiSkeleton class="h-6 w-[100px]" />
      <UiSkeleton class="h-6 w-[150px]" />
      <UiSkeleton class="h-6 w-[100px]" />
      <UiSkeleton class="h-6 w-[80px]" />
    </div>
    <div class="flex gap-x-4">
      <UiSkeleton class="h-6 w-[100px]" />
      <UiSkeleton class="h-6 w-[150px]" />
      <UiSkeleton class="h-6 w-[100px]" />
      <UiSkeleton class="h-6 w-[80px]" />
    </div>
  </div>
</template>`;

/**
 * Table skeleton with header and rows.
 */
export const Table: Story = {
  render: (args) => ({
    components: { UiSkeleton },
    setup() {
      return { args };
    },
    template: `<div class="gap-y-4">
      <div class="flex gap-x-4">
        <UiSkeleton class="h-8 w-[100px]" />
        <UiSkeleton class="h-8 w-[150px]" />
        <UiSkeleton class="h-8 w-[100px]" />
        <UiSkeleton class="h-8 w-[80px]" />
      </div>
      <div class="flex gap-x-4">
        <UiSkeleton class="h-6 w-[100px]" />
        <UiSkeleton class="h-6 w-[150px]" />
        <UiSkeleton class="h-6 w-[100px]" />
        <UiSkeleton class="h-6 w-[80px]" />
      </div>
      <div class="flex gap-x-4">
        <UiSkeleton class="h-6 w-[100px]" />
        <UiSkeleton class="h-6 w-[150px]" />
        <UiSkeleton class="h-6 w-[100px]" />
        <UiSkeleton class="h-6 w-[80px]" />
      </div>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: tableTemplateSource,
      },
    },
  },
};
