import { argsToTemplate, componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { RadioComponent, RadioGroupComponent } from '../../public-api';

type RadioWithLabel = RadioComponent & { label: string };

const meta: Meta<RadioWithLabel> = {
  title: 'Components/Radio/Radio',
  id: 'radio',
  component: RadioComponent,
  argTypes: {
    value: {
      control: {
        type: null
      }
    },
    label: {
      description: 'Note that this is not an `@Input()`, it should be placed inside `<nj-radio>`'
    },
    valueChange: {
      control: {
        type: null
      }
    },
    isChecked: {
      control: {
        type: null
      }
    }
  },
  decorators: [
    moduleMetadata({
      imports: [RadioGroupComponent]
    }),
    componentWrapperDecorator(RadioGroupComponent)
  ],
  parameters: {
    docs: {
      imports: [RadioComponent, RadioGroupComponent]
    }
  }
};

export default meta;

type Story = StoryObj<RadioWithLabel>;

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