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

const meta: Meta<RadioGroupComponent> = {
  title: 'Components/Radio/Radio Group',
  id: 'radio-group',
  component: RadioGroupComponent,
  argTypes: {
    value: {
      control: {
        type: null
      }
    },
    selected: {
      control: {
        type: null
      }
    },
    name: {
      control: {
        type: null
      }
    },
    required: {
      control: {
        type: null
      }
    },
    valueChange: {
      control: {
        type: null
      }
    }
  },
  decorators: [
    moduleMetadata({
      imports: [RadioComponent]
    })
  ],
  parameters: {
    docs: {
      description: {
        component:
          '`<nj-radio-group>` is compatible with `@angular/forms` and supports both `FormsModule` and `ReactiveFormsModule`.'
      },
      imports: [RadioComponent, RadioGroupComponent]
    }
  }
};

export default meta;

type Story = StoryObj<RadioGroupComponent>;

export const RadioGroup: Story = {
  args: {
    legend: 'Please select an option (required)'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-radio-group ${argsToTemplate(args)}>
     <nj-radio inputId="radio1" name="radio-group" value="option1">Option 1</nj-radio>
     <nj-radio inputId="radio2" name="radio-group" value="option2" [isDisabled]="true">Option 2</nj-radio>
     <nj-radio inputId="radio3" name="radio-group" value="option3">Option 3</nj-radio>
     <nj-radio inputId="radio4" name="radio-group" value="option4">Option 4</nj-radio>
    </nj-radio-group>
    `
  })
};