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

const meta: Meta<FormItemComponent> = {
  title: 'Components/Select/Native Select',
  id: 'select-native',
  component: FormItemComponent,
  decorators: [
    moduleMetadata({
      imports: [FormFieldDirective]
    })
  ],
  parameters: {
    docs: {
      imports: [FormFieldDirective, FormItemComponent],
      controls: {
        exclude: new RegExp(/password\w*/)
      }
    }
  },
  argTypes: {
    hasCustomIcon: {
      control: {
        type: null
      }
    },
    iconClick: {
      control: {
        type: null
      }
    },
    iconKeydown: {
      control: {
        type: null
      }
    },
    wrapperClick: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type FormItemWithLabelAndSubscript = FormItemComponent & { label: string; subscript: string };
type Story = StoryObj<FormItemWithLabelAndSubscript>;

export const NativeSelect: Story = {
  args: {
    label: 'Label',
    subscript: 'Hint to help the user fill the input',
    inputId: 'inputId'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-form-item ${argsToTemplate(args, { exclude: ['label', 'subscript'] })}>
        <select njFormField [id]="inputId" [disabled]="isDisabled">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
          <option>Option 4</option>
          <option>Option 5</option>
        </select>
        <ng-container njFormLabel>{{label}}</ng-container>
        <ng-container njFormSubscript>{{subscript}}</ng-container>
    </nj-form-item>
    `
  })
};