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

const meta: Meta<FormItemComponent> = {
  title: 'Components/FormItem/FormItem',
  id: 'form-item',
  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 FormItem: Story = {
  args: {
    label: 'Label',
    subscript: 'Hint to help the user fill the input',
    inputId: 'test'
  },
  render: (args) => ({
    props: args,
    template: `
    ${args.isRequired ? '<p>Fields with an asterisk (*) are required</p>' : ''}
    <nj-form-item ${argsToTemplate(args, { exclude: ['label', 'subscript'] })}>
        <input njFormField [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>
    `
  })
};

export const CustomIcon: Story = {
  args: {
    label: 'Label',
    subscript: 'Hint to help the user fill the input',
    inputId: 'test',
    hasCustomIcon: true
  },
  render: (args) => ({
    props: args,
    template: `
    ${args.isRequired ? '<p>Fields with an asterisk (*) are required</p>' : ''}
    <nj-form-item ${argsToTemplate(args, { exclude: ['label', 'subscript'] })}>
        <input njFormField [id]="inputId" [disabled]="isDisabled"/>
        <ng-container njFormLabel>{{label}}</ng-container>
        <ng-container njFormSubscript>{{subscript}}</ng-container>
        <div njFormCustomIcon
            [ngStyle]="{
              display: 'grid',
              'place-items': 'center'
            }">
          <svg aria-hidden="true"
            focusable="false"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
            [ngStyle]="{
              width: 'var(--nj-semantic-size-icon-md)',
              height: 'var(--nj-semantic-size-icon-md)'
            }"
          >
              <path d="M10.5 5.5V6.5H9.5V5.5H10.5ZM10.5 9.5V14.5H9.5V9.5H10.5ZM0.5 10C0.5 4.75614 4.75614 0.5 10 0.5C15.2439 0.5 19.5 4.75614 19.5 10C19.5 15.2439 15.2439 19.5 10 19.5C4.75614 19.5 0.5 15.2439 0.5 10ZM1.5 10C1.5 14.6861 5.31386 18.5 10 18.5C14.6861 18.5 18.5 14.6861 18.5 10C18.5 5.31386 14.6861 1.5 10 1.5C5.31386 1.5 1.5 5.31386 1.5 10Z" />
          </svg>
        </div>
    </nj-form-item>
    `
  })
};