import type { Meta, StoryContext, StoryObj } from '@storybook/react';
import { codeBlock } from 'common-tags';

import { SVGExample } from './SVGExample';

const meta: Meta<typeof SVGExample> = {
  title: 'SVG',
  component: SVGExample,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: 'The `svgIcon()` function returns the raw SVG as a string.',
      },
      source: {
        transform: (_code: string, ctx: StoryContext) => {
          /* eslint-disable prettier/prettier */
          const { name, variant, fill, size, width, height, xclass } = ctx.args;
          const iconOpts = `{ name: '${name}', variant: '${variant}', fill: '${fill}'${size || width || height ? size ? `, size: '${size}'` : `, width: '${width}', height: '${height}'` : ''}${xclass ? `, xclass: '${xclass}'` : ''} }`

          return codeBlock`
          <div dangerouslySetInnerHTML={{ __html: svgIcon(${iconOpts}) }} />
          
          <pre>
            {svgIcon(${iconOpts})}
          </pre>
          `;
          /* eslint-enable prettier/prettier */
        },
      },
      canvas: {
        sourceState: 'shown',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    fill: { control: 'color' },
    size: { control: 'number' },
    width: { control: 'number' },
    height: { control: 'number' },
  },
};

export default meta;

type Story = StoryObj<typeof SVGExample>;

export const Story: Story = {
  args: {
    name: 'edit',
    variant: 'filled',
    fill: '#000',
  },
};