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

const meta: Meta<FormItemComponent> = {
  title: 'Components/FormItem/Textarea',
  id: 'form-item-textarea',
  component: FormItemComponent,
  decorators: [
    moduleMetadata({
      imports: [FormFieldDirective]
    })
  ],
  parameters: {
    docs: {
      description: {
        component:
          '`<nj-form-item>` is compatible with `@angular/forms` and supports both `FormsModule` and `ReactiveFormsModule`'
      },
      imports: [FormItemComponent, FormFieldDirective],
      controls: {
        exclude: new RegExp(/password\w*/)
      }
    }
  },
  argTypes: {
    hasCustomIcon: {
      control: {
        type: null
      }
    },
    isSelect: {
      control: {
        type: null
      }
    },
    additionalClass: {
      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 Textarea: Story = {
  args: {
    label: 'Label',
    subscript: 'Hint to help the user fill the input',
    hasError: false,
    hasHint: false,
    isDisabled: false,
    isFloatingLabel: true,
    inputId: 'inputId'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-form-item ${argsToTemplate(args, { exclude: ['label', 'subscript'] })}>
        <textarea njFormField [id]="inputId" [disabled]="isDisabled"></textarea>
        <ng-container njFormLabel>{{label}}</ng-container>
        <ng-container njFormSubscript>{{subscript}}</ng-container>
    </nj-form-item>
    `
  })
};