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

const meta: Meta<SegmentedControlComponent> = {
  title: 'Components/Segmented Control',
  id: 'segmented-control',
  component: SegmentedControlComponent,
  decorators: [
    moduleMetadata({
      imports: [SegmentedControlButtonComponent]
    })
  ],
  argTypes: {
    valueChange: {
      control: {
        type: null
      }
    }
  },
  parameters: {
    docs: {
      imports: [SegmentedControlButtonComponent, SegmentedControlComponent]
    }
  }
};

export default meta;

type Story = StoryObj<SegmentedControlComponent>;

export const SegmentedControl: Story = {
  args: {
    value: 'opt1'
  },
  render: (args) => ({
    props: args,
    template: `
        <nj-segmented-control ${argsToTemplate(args)}>
          <nj-segmented-control-button value="opt1">Item 1</nj-segmented-control-button>
          <nj-segmented-control-button value="opt2">Item 2</nj-segmented-control-button>
          <nj-segmented-control-button value="opt3">Item 3</nj-segmented-control-button>
          <nj-segmented-control-button value="opt4">Item 4</nj-segmented-control-button>
          <nj-segmented-control-button value="opt5">Item 5</nj-segmented-control-button>
          <nj-segmented-control-button value="opt6" iconName="av_timer">Item 6</nj-segmented-control-button>
          <nj-segmented-control-button value="opt7" [isDisabled]="true">Item 7</nj-segmented-control-button>
        </nj-segmented-control>
    `
  })
};