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

const disabled = {
  table: {
    disable: true,
  },
};

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

const meta = {
  title: "Components/Data Display/UserAvatar",
  component: UserAvatar,
  argTypes: {
    avatarBorder: disabled,
    src: disabled,
    online: disabled,
    opacity: disabled,
    tooltip: disabled,
    secondaryTooltip: disabled,
    tertiaryTooltip: disabled,
    tooltipProps: disabled,
    presentation: disabled,
    noBackground: disabled,
  },
  decorators: [decorator],
} satisfies Meta<typeof UserAvatar>;

export default meta;

const Template: StoryFn<typeof UserAvatar> = ({ name, id, ...restProps }) => {
  return (
    <>
      <div style={{ display: "flex", flexDirection: "row", gap: "160px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
          <UserAvatar
            name={name}
            id={id}
            online
            src="https://placekitten.com/256/256?image=3"
            {...restProps}
          />
          <UserAvatar
            name={name}
            id={id}
            tooltip={name}
            secondaryTooltip="eugene@docflow.co"
            tertiaryTooltip="Viewing now"
            online
            src="https://placekitten.com/256/256?image=3"
            {...restProps}
          />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
          <UserAvatar id={id} name={name} online {...restProps} />
          <UserAvatar
            name={name}
            id={id}
            online
            tooltip={name}
            secondaryTooltip="eugene@docflow.co"
            tertiaryTooltip="Viewing now"
            {...restProps}
          />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
          <UserAvatar id={id} name={name} online noBackground {...restProps} />
          <UserAvatar
            name={name}
            id={id}
            online
            noBackground
            tooltip={name}
            secondaryTooltip="eugene@docflow.co"
            tertiaryTooltip="Viewing now"
            {...restProps}
          />
        </div>
      </div>
      <div
        style={{
          paddingTop: 100,
          display: "flex",
          flexDirection: "row",
          gap: "160px",
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
          <UserAvatar
            name={name}
            id={id}
            src="https://placekitten.com/256/256?image=3"
            {...restProps}
          />
          <UserAvatar
            name={name}
            id={id}
            tooltip={name}
            secondaryTooltip="eugene@docflow.co"
            tertiaryTooltip="Last viewed an hour ago"
            src="https://placekitten.com/256/256?image=3"
            {...restProps}
          />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
          <UserAvatar name={name} id={id} {...restProps} />
          <UserAvatar
            name={name}
            id={id}
            tooltip={name}
            secondaryTooltip="eugene@docflow.co"
            tertiaryTooltip="Last viewed an hour ago"
            {...restProps}
          />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
          <UserAvatar name={name} id={id} noBackground {...restProps} />
          <UserAvatar
            name={name}
            id={id}
            tooltip={name}
            noBackground
            secondaryTooltip="eugene@docflow.co"
            tertiaryTooltip="Last viewed an hour ago"
            {...restProps}
          />
        </div>
      </div>
    </>
  );
};

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

Default.args = {
  name: "Example Name",
  id: "Example@gmail.com",
  size: 24,
};
