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

import { StarIcon } from '@/icons';

import Tag, {
  TagProps,
  TagShape,
  TagVariant,
  tagColorCssVariables,
} from './Tag';

type PagePropsAndCustomArgs = TagProps & {
  foregroundColor?: string;
  backgroundColor?: string;
  borderColor?: string;
};

function TagDemo(args: PagePropsAndCustomArgs) {
  const { foregroundColor, backgroundColor, borderColor, style, ...restProps } =
    args;
  return (
    <Tag
      style={{
        ...tagColorCssVariables({
          foreground: foregroundColor,
          background: backgroundColor,
          border: borderColor,
        }),
        ...style,
      }}
      {...restProps}
    />
  );
}

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/Tag',
  component: TagDemo,
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

export const Default: Story = {
  args: {
    className: '',
    children: 'Tag',
    variant: TagVariant.Standard,
    shape: TagShape.Tag,
    foregroundColor: '',
    backgroundColor: '',
    borderColor: '',
  },
};

export const New: Story = {
  args: {
    className: '',
    children: 'New Feature',
    variant: TagVariant.New,
    shape: TagShape.Badge,
    foregroundColor: '',
    backgroundColor: '',
    borderColor: '',
  },
};

export const ModelTag: Story = {
  args: {
    className: '',
    children: 'v5',
    variant: TagVariant.Auk,
    shape: TagShape.Tag,
    foregroundColor: '',
    backgroundColor: '',
    borderColor: '',
  },
};

export const Beta: Story = {
  args: {
    className: '',
    children: 'Beta',
    variant: TagVariant.Beta,
    shape: TagShape.Tag,
    foregroundColor: '',
    backgroundColor: '',
    borderColor: '',
  },
};

export const Pro: Story = {
  args: {
    className: '',
    children: 'Pro',
    variant: TagVariant.Pro,
    shape: TagShape.Tag,
    foregroundColor: '',
    backgroundColor: '',
    borderColor: '',
  },
};

export const MadeWithSuno: Story = {
  args: {
    className: '',
    children: 'Made with Suno',
    variant: TagVariant.Standard,
    shape: TagShape.Tag,
    foregroundColor: '',
    backgroundColor: '',
    borderColor: '',
  },
};

export const MadeWithStudio: Story = {
  args: {
    className: '',
    children: 'Made with Studio',
    variant: TagVariant.Studio,
    shape: TagShape.Tag,
    foregroundColor: '',
    backgroundColor: '',
    borderColor: '',
  },
};

export const CustomColors: Story = {
  args: {
    className: '',
    children: 'We love CSS variables',
    variant: TagVariant.Inherit,
    shape: TagShape.Tag,
    foregroundColor: 'var(--color-accent-blue)',
    backgroundColor: 'var(--color-accent-blue-contrast)',
    borderColor: '',
  },
};

export const CustomColorsHex: Story = {
  args: {
    className: '',
    children: "i'm lovin' it",
    variant: TagVariant.Inherit,
    shape: TagShape.Tag,
    foregroundColor: '#ffffff',
    backgroundColor: '#d52b1e',
    borderColor: '#fdc82f',
  },
};

export const JSXChildren: Story = {
  args: {
    className: '',
    children: (
      <>
        <StarIcon />
        <span>Great job</span>
        <StarIcon />
      </>
    ),
    variant: TagVariant.Standard,
    shape: TagShape.Tag,
    foregroundColor: '',
    backgroundColor: '',
    borderColor: '',
  },
  argTypes: {
    children: {
      table: {
        disable: true,
      },
    },
  },
};

export const InlineWithText: Story = {
  render: (args) => {
    return (
      <div>
        How about this feature?
        <Tag {...args} />
      </div>
    );
  },
  args: {
    className: 'uppercase ml-2',
    children: 'New',
    variant: TagVariant.New,
    shape: TagShape.Tag,
    foregroundColor: '',
    backgroundColor: '',
    borderColor: '',
  },
};