import VAvatar from './VAvatar.vue';
import VIcon from './VIcon.vue'; // For slot example
import type { Meta, StoryObj } from '@storybook/vue3';

const meta: Meta<typeof VAvatar> = {
  title: 'Valerie/VAvatar',
  component: VAvatar,
  tags: ['autodocs'],
  argTypes: {
    src: {
      control: 'text',
      description: 'URL to the avatar image. Invalid URLs will demonstrate fallback behavior if initials or slot are provided.',
    },
    initials: { control: 'text' },
    alt: { control: 'text' },
    // Slot content is best demonstrated via render functions or template strings in individual stories
  },
  parameters: {
    docs: {
      description: {
        component: 'An avatar component that can display an image, initials, or custom content via a slot. Fallback order: src -> initials -> slot.',
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof VAvatar>;

export const WithImage: Story = {
  args: {
    // Using a placeholder image service. Replace with a valid image URL for testing.
    src: 'https://via.placeholder.com/40x40.png?text=IMG',
    alt: 'User Avatar',
  },
};

export const WithInitials: Story = {
  args: {
    initials: 'JD',
    alt: 'User Initials',
  },
};

export const WithSlotContent: Story = {
  render: (args) => ({
    components: { VAvatar, VIcon }, // VIcon for the example
    setup() {
      return { args };
    },
    template: `
      <VAvatar v-bind="args">
        <VIcon name="alert" style="font-size: 20px; color: #007AFF;" />
      </VAvatar>
    `,
  }),
  args: {
    alt: 'Custom Icon Avatar',
  },
  parameters: {
    docs: {
      description: {
        story: 'Avatar with custom content (e.g., an icon) passed through the default slot. This appears if `src` and `initials` are not provided or if `src` fails to load and `initials` are also absent.',
      },
    },
  },
};

export const ImageErrorFallbackToInitials: Story = {
  args: {
    src: 'https://invalid-url-that-will-definitely-fail.jpg',
    initials: 'ER',
    alt: 'Error Fallback',
  },
  parameters: {
    docs: {
      description: {
        story: 'Demonstrates fallback to initials when the image `src` is invalid or fails to load. The component attempts to load the image; upon error, it should display the initials.',
      },
    },
  },
};

export const ImageErrorFallbackToSlot: Story = {
  render: (args) => ({
    components: { VAvatar, VIcon },
    setup() { return { args }; },
    template: `
      <VAvatar v-bind="args">
        <VIcon name="search" style="font-size: 20px; color: #6c757d;" />
      </VAvatar>
    `,
  }),
  args: {
    src: 'https://another-invalid-url.png',
    alt: 'Error Fallback to Slot',
    // No initials provided, so it should fall back to slot content
  },
  parameters: {
    docs: {
      description: {
        story: 'Demonstrates fallback to slot content when `src` is invalid and `initials` are not provided.',
      },
    },
  },
};

export const OnlyInitialsNoSrc: Story = {
  args: {
    initials: 'AB',
    alt: 'Initials Only',
  },
};

export const EmptyPropsUsesSlot: Story = {
  render: (args) => ({
    components: { VAvatar },
    setup() { return { args }; },
    template: `
      <VAvatar v-bind="args">
        <span>?</span>
      </VAvatar>
    `,
  }),
  args: {
    alt: 'Empty Avatar',
  },
   parameters: {
    docs: {
      description: {
        story: 'When `src` and `initials` are not provided, the content from the default slot is rendered.',
      },
    },
  },
};

export const LargerAvatarViaStyle: Story = {
  args: {
    initials: 'LG',
    alt: 'Large Avatar',
  },
  decorators: [() => ({ template: '<div style="--avatar-size: 80px;"><story/></div>' })],
  // This story assumes you might have CSS like:
  // .avatar { width: var(--avatar-size, 40px); height: var(--avatar-size, 40px); }
  // Or you'd pass a size prop if implemented. For now, it just wraps.
  // A more direct approach for story:
   render: (args) => ({
    components: { VAvatar },
    setup() { return { args }; },
    template: `<VAvatar v-bind="args" style="width: 80px; height: 80px; font-size: 1.5em;" />`,
  }),
   parameters: {
    docs: {
      description: {
        story: 'Avatars can be resized using standard CSS. The internal text/icon might also need adjustment for larger sizes if not handled by `em` units or percentages.',
      },
    },
  },
};
