import { Avatar } from "..";
import { avatarVariants } from "../avatar.styled";
import { commonProps } from "../../../utils/storybook";

import type { StoryObj, Meta } from "@storybook/react";

const meta: Meta<typeof Avatar> = {
  title: "Avatar",
  component: Avatar,
  tags: ["autodocs"],
  argTypes: {
    variant: {
      description: "Sets the variant of the avatar.",
      options: Object.keys(avatarVariants),
      control: { type: "select" },
      table: {
        defaultValue: {
          summary: "large",
        },
        type: {
          summary: "large | small",
        },
      },
    },
    asChild: {
      table: {
        defaultValue: {
          summary: "false",
        },
      },
      control: false,
    },
    fallbackDelayMs: {
      table: {
        defaultValue: {
          summary: "600",
        },
      },
    },
    fallbackProps: {
      table: {
        category: "Anatomy Props",
        type: {
          summary: "React.ComponentProps<typeof RadixAvatar.Fallback>",
        },
      },
    },
    imageProps: {
      table: {
        category: "Anatomy Props",
        type: {
          summary: "React.ComponentProps<typeof RadixAvatar.Image>",
        },
      },
    },

    ...commonProps,
  },
  args: {
    image: "https://cataas.com/cat/says/hello%20world!",
    alt: "Alt text",
    fallback: "Fallback",
    variant: "large",
    asChild: false,
    fallbackDelayMs: 600,
  },
};

export default meta;

type Story = StoryObj<typeof Avatar>;

export const Default: Story = {
  render: (args) => <Avatar {...args} />,
};

/**
 * If `image` is falsy the fallback will render with a `fallbackDelayMs` of `0`.
 */
export const NoImage: Story = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  render: (args) => {
    return <Avatar image="" alt="Alt text" fallback="Fallback" variant="large" />;
  },
};