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

type CheckboxWithLabel = CheckboxComponent & { label?: string };

const meta: Meta<CheckboxWithLabel> = {
  title: 'Components/Checkbox',
  id: 'checkbox',
  component: CheckboxComponent,
  parameters: {
    docs: {
      description: {
        component:
          '`<nj-checkbox>` is compatible with `@angular/forms` and supports both `FormsModule` and `ReactiveFormsModule`'
      },
      imports: [CheckboxComponent]
    }
  },
  argTypes: {
    value: {
      control: {
        type: null
      }
    },
    label: {
      description:
        'Note that this is not an `@Input()`, it should be placed inside `<nj-checkbox>`. By default, it goes to the right of the checkbox. This can be any custom content (eg: an icon)'
    },
    name: {
      control: {
        type: null
      }
    },
    ariaLabel: {
      control: {
        type: null
      }
    },
    ariaLabelledby: {
      control: {
        type: null
      }
    },
    valueChange: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type Story = StoryObj<CheckboxWithLabel>;

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