import { argsToTemplate, Meta, StoryObj } from '@storybook/angular';
import { withContrastedVariant } from '../../../.storybook/utils/with-contrasted-variant.decorator';
import { ButtonComponent } from '../../public-api';

type ButtonWithLabel = ButtonComponent & {
  label?: string;
  customIcon?: string;
};

const meta: Meta<ButtonWithLabel> = {
  title: 'Components/Button',
  id: 'button',
  component: ButtonComponent,
  argTypes: {
    label: {
      description:
        'Note that this is not an `@Input()`, it should be placed inside `<nj-button>`. This can be any custom content'
    },
    customIcon: {
      description: 'Note that this is not an `@Input()`, it should be placed inside `<nj-button>`. This can be an svg'
    },
    size: {
      type: 'string',
      control: 'radio',
      options: ['xsmall', 'small', 'medium', 'large', 'xlarge']
    },
    hasCustomIcon: {
      control: {
        type: null
      }
    },
    type: {
      control: {
        type: null
      }
    },
    buttonClick: {
      control: {
        type: null
      }
    }
  },
  decorators: [
    withContrastedVariant({
      stateByProps: (props) => {
        return props['variant'] === 'inverse' ? 'inverse' : null;
      }
    })
  ],
  parameters: {
    docs: {
      imports: [ButtonComponent]
    }
  }
};

export default meta;

type Story = StoryObj<ButtonWithLabel>;

export const Button: Story = {
  args: {
    label: 'Button'
  },
  render: (args) => ({
    props: args,
    template: `
      <nj-button ${argsToTemplate(args, { exclude: ['label'] })}>
          {{label}}
      </nj-button>
    `
  })
};