import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import {
  ThemeProviderWithStyledEngine,
  UserAvatar,
  UserAvatarGroup,
} from "../index";

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Data Display/UserAvatarGroup",
  component: UserAvatarGroup,
  argTypes: {},
  decorators: [decorator],
} satisfies Meta<typeof UserAvatarGroup>;

export default meta;

const Template: StoryFn<typeof UserAvatarGroup> = ({
  size = 24,
  ...restProps
}) => {
  return (
    <UserAvatarGroup size={size} {...restProps}>
      <UserAvatar
        id={"Eugene@docflow.co"}
        name={"Eugene"}
        tooltip="Eugene Klochkov"
        secondaryTooltip="eugene@docflow.co"
        tertiaryTooltip="Viewing now"
        online
        src="https://placekitten.com/256/256?image=3"
        size={size}
      />
      <UserAvatar
        id={"oscar@docflow.co"}
        name={"Oscar Gonzalez"}
        tooltip="Oscar Gonzalez"
        secondaryTooltip="oscar@docflow.co"
        tertiaryTooltip="Viewing now"
        online
        size={size}
      />
      <UserAvatar
        id={"Jantermaten@gmail.com"}
        name={"Jan termaten"}
        tooltip="Jan termaten"
        secondaryTooltip="Jantermaten@gmail.com"
        tertiaryTooltip="Viewing now"
        online
        size={size}
      />
      <UserAvatar
        id={"Murphy Jones"}
        name={"Murphy Jones"}
        tooltip="Murphy Jones"
        secondaryTooltip="oscar@docflow.co"
        tertiaryTooltip="Viewing now"
        online
        size={size}
      />
      <UserAvatar
        id={"John Cena"}
        name={"John Cena"}
        tooltip="John Cena"
        secondaryTooltip="oscar@docflow.co"
        tertiaryTooltip="Viewing now"
        online
        size={size}
      />
      <UserAvatar
        id={"Sara Hekma"}
        name={"Sara Hekma"}
        tooltip="Sara Hekma"
        secondaryTooltip="sara@docflow.co"
        tertiaryTooltip="Viewing now"
        online
        size={size}
      />
      <UserAvatar
        id={"Tim Olej"}
        name={"Tim Olej"}
        tooltip="Tim olej"
        secondaryTooltip="tim@docflow.co"
        tertiaryTooltip="2 hours ago"
        size={size}
      />
      <UserAvatar
        id={"Oche Uruz"}
        name={"Oche Uruz"}
        tooltip="Oche uruz"
        secondaryTooltip="oche@docflow.co"
        tertiaryTooltip="1 day ago"
        size={size}
      />
      <UserAvatar
        id={"Christine Koekoek"}
        name={"Christine Koekoek"}
        tooltip="Christine Koekoek"
        secondaryTooltip="sara@docflow.co"
        tertiaryTooltip="1 month ago"
        size={size}
      />
      <UserAvatar
        id={"Jan Gooszen"}
        name={"Jan Gooszen"}
        tooltip="Jan Gooszen"
        secondaryTooltip="jan@docflow.co"
        tertiaryTooltip="2 months ago"
        size={size}
      />
      <UserAvatar
        id={"bram@docflow.co"}
        name={"Bram Janssen"}
        tooltip="Bram Janssen"
        secondaryTooltip="bram@docflow.co"
        tertiaryTooltip="1 year ago"
        size={size}
      />
    </UserAvatarGroup>
  );
};

export const Default: StoryFn<typeof UserAvatarGroup> = Template.bind({});

Default.args = {
  size: 24,
  vertical: false,
  maxChildren: 5,
  tooltipTitle: "Last viewed by",
};
