import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";

import { Grid } from "@mui/material";
import {
  Chip,
  UserAvatar,
  Icon,
  ThemeProviderWithStyledEngine,
} from "../index";

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

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

const meta = {
  title: "Components/Data Display/Chip",
  component: Chip,
  decorators: [decorator],
  argTypes: {
    label: {
      name: "Label of the first chip",
      type: "string",
    },
    size: {
      options: ["28", "20"],
      control: { type: "radio" },
    },
    children: disabled,
    ref: disabled,
    avatar: disabled,
    icon: disabled,
    deleteIcon: disabled,
    onDelete: disabled,
  },
} satisfies Meta<typeof Chip>;

export default meta;

const Template: StoryFn<typeof Chip> = ({ label, ...args }) => {
  return (
    <Grid container spacing={2}>
      <Grid item>
        <Chip label={label} {...args} />
      </Grid>
      <Grid item>
        <Chip label="Bye" {...args} onDelete={undefined} />
      </Grid>
      <Grid item>
        <Chip
          label="Kat"
          avatar={
            <UserAvatar
              name="Kat"
              id="kat@docflow.co"
              src="https://placekitten.com/256/256?image=3"
              online
            />
          }
          {...args}
        />
      </Grid>
      <Grid item>
        <Chip label="Kopieer" icon={<Icon name="copy" />} {...args} />
      </Grid>
      <Grid item>
        <Chip
          label="Kopieer"
          avatar={
            <div className="flex h-16 w-16 items-center justify-center text-Y300">
              <Icon
                size="20"
                weight="medium"
                color="current"
                name="globe"
                ESCAPE_className="shrink-0"
              />
            </div>
          }
          {...args}
          size="20"
          ESCAPE_className="bg-Y50 focus:bg-Y50 bg-overlay from-N900/[0.02] to-N900/[0.02]"
        />
      </Grid>
    </Grid>
  );
};

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

Default.args = {
  label: "Chip",
  disabled: false,
  size: "28",
};
