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

const meta: Meta<FormItemComponent> = {
  title: 'Components/FormItem/Password',
  id: 'form-item-password',
  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]
  },
  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 Password: Story = {
  args: {
    label: 'Label',
    subscript: 'Hint to help the user fill the input',
    inputId: 'inputId',
    passwordButtonLabelShow: 'Show password',
    passwordButtonLabelHide: 'Hide password',
    passwordNoticeIsVisible: 'Password is visible',
    passwordNoticeIsHidden: 'Password is hidden'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-form-item ${argsToTemplate(args, { exclude: ['label', 'subscript'] })}>
        <input njFormField type="password" [id]="inputId" [disabled]="isDisabled"/>
        <ng-container njFormLabel>{{label}}</ng-container>
        <ng-container njFormSubscript>{{subscript}}</ng-container>
        <!--
          Custom icon has attribute njFormCustomIcon. Eg:
          <svg njFormCustomIcon>customIcon</svg>
        !-->
    </nj-form-item>
    `
  })
};