import type { Meta, StoryObj } from '@storybook/vue3-vite';
import {
  UiAvatar,
  UiAvatarFallback,
  UiAvatarGroup,
  UiAvatarImage,
} from './index';

/**
 * UiAvatar is a small image-based representation of a user or entity, with a graceful text or icon fallback when the image fails to load.
 * Use it in lists, comments, profile cards, and identity badges.
 */
const meta: Meta<typeof UiAvatar> = {
  title: 'Components/UiAvatar',
  component: UiAvatar,
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: 'select',
      options: [5, 6, 8, 10, 12],
      description:
        'Avatar width and height token. Maps to `size-5`, `size-6`, `size-8`, `size-10`, or `size-12`.',
    },
  },
  args: {
    size: 8,
  },
};

export default meta;

type Story = StoryObj<typeof UiAvatar>;

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

<template>
  <UiAvatar>
    <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <UiAvatarFallback>CN</UiAvatarFallback>
  </UiAvatar>
</template>`;

/**
 * Default avatar with image and fallback.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiAvatar,
      UiAvatarFallback,
      UiAvatarImage,
    },
    setup() {
      return { args };
    },
    template: `
      <UiAvatar :size="args.size">
        <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <UiAvatarFallback>CN</UiAvatarFallback>
      </UiAvatar>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

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

<template>
  <div class="flex items-center gap-4">
    <UiAvatar :size="5">
      <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <UiAvatarFallback>CN</UiAvatarFallback>
    </UiAvatar>
    <UiAvatar :size="6">
      <UiAvatarImage src="https://github.com/leerob.png" alt="@leerob" />
      <UiAvatarFallback>LR</UiAvatarFallback>
    </UiAvatar>
    <UiAvatar :size="8">
      <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <UiAvatarFallback>ER</UiAvatarFallback>
    </UiAvatar>
    <UiAvatar :size="10">
      <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <UiAvatarFallback>CN</UiAvatarFallback>
    </UiAvatar>
    <UiAvatar :size="12">
      <UiAvatarImage src="https://github.com/leerob.png" alt="@leerob" />
      <UiAvatarFallback>LR</UiAvatarFallback>
    </UiAvatar>
  </div>
</template>`;

/**
 * Available avatar sizes.
 */
export const Sizes: Story = {
  render: () => ({
    components: {
      UiAvatar,
      UiAvatarFallback,
      UiAvatarImage,
    },
    template: `
      <div class="flex items-center gap-4">
        <UiAvatar :size="5">
          <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <UiAvatarFallback>CN</UiAvatarFallback>
        </UiAvatar>
        <UiAvatar :size="6">
          <UiAvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <UiAvatarFallback>LR</UiAvatarFallback>
        </UiAvatar>
        <UiAvatar :size="8">
          <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
          <UiAvatarFallback>ER</UiAvatarFallback>
        </UiAvatar>
        <UiAvatar :size="10">
          <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <UiAvatarFallback>CN</UiAvatarFallback>
        </UiAvatar>
        <UiAvatar :size="12">
          <UiAvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <UiAvatarFallback>LR</UiAvatarFallback>
        </UiAvatar>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: sizesTemplateSource,
      },
    },
  },
};

const fallbackTemplateSource = `<script setup lang="ts">
import { UiAvatar, UiAvatarFallback, UiAvatarImage } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAvatar>
    <UiAvatarImage src="" alt="@user" />
    <UiAvatarFallback>CN</UiAvatarFallback>
  </UiAvatar>
</template>`;

/**
 * Avatar showing fallback when image fails to load.
 */
export const Fallback: Story = {
  render: () => ({
    components: {
      UiAvatar,
      UiAvatarFallback,
      UiAvatarImage,
    },
    template: `
      <UiAvatar>
        <UiAvatarImage src="" alt="@user" />
        <UiAvatarFallback>CN</UiAvatarFallback>
      </UiAvatar>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: fallbackTemplateSource,
      },
    },
  },
};

const multipleTemplateSource = `<script setup lang="ts">
import { UiAvatar, UiAvatarFallback, UiAvatarImage } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex flex-row items-center gap-4">
    <UiAvatar>
      <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <UiAvatarFallback>CN</UiAvatarFallback>
    </UiAvatar>
    <UiAvatar>
      <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <UiAvatarFallback>ER</UiAvatarFallback>
    </UiAvatar>
  </div>
</template>`;

/**
 * Multiple avatars in a row.
 */
export const Multiple: Story = {
  render: () => ({
    components: {
      UiAvatar,
      UiAvatarFallback,
      UiAvatarImage,
    },
    template: `
      <div class="flex flex-row items-center gap-4">
        <UiAvatar>
          <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <UiAvatarFallback>CN</UiAvatarFallback>
        </UiAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
          <UiAvatarFallback>ER</UiAvatarFallback>
        </UiAvatar>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: multipleTemplateSource,
      },
    },
  },
};

const stackedTemplateSource = `<script setup lang="ts">
import { UiAvatar, UiAvatarFallback, UiAvatarGroup, UiAvatarImage } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAvatarGroup>
    <UiAvatar>
      <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <UiAvatarFallback>CN</UiAvatarFallback>
    </UiAvatar>
    <UiAvatar>
      <UiAvatarImage src="https://github.com/leerob.png" alt="@leerob" />
      <UiAvatarFallback>LR</UiAvatarFallback>
    </UiAvatar>
    <UiAvatar>
      <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <UiAvatarFallback>ER</UiAvatarFallback>
    </UiAvatar>
  </UiAvatarGroup>
</template>`;

/**
 * Avatar group with stacked avatars.
 */
export const AvatarGroup: Story = {
  render: () => ({
    components: {
      UiAvatar,
      UiAvatarFallback,
      UiAvatarGroup,
      UiAvatarImage,
    },
    template: `
      <UiAvatarGroup>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <UiAvatarFallback>CN</UiAvatarFallback>
        </UiAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <UiAvatarFallback>LR</UiAvatarFallback>
        </UiAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
          <UiAvatarFallback>ER</UiAvatarFallback>
        </UiAvatar>
      </UiAvatarGroup>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: stackedTemplateSource,
      },
    },
  },
};
