import type { Meta, StoryObj } from '@storybook/angular';
import { FormBuilder } from '@angular/forms';

import { configProps, stateProps } from './mock';

import {{! pick new delimiters for mustache }}{{=<% %>=}}{<%={{ }}=%> {{COMPONENT_CLASS_NAME}}Component {{=<% %>=}}}<%={{ }}=%>{{! revert delimiters for mustache }} from './{{COMPONENT_CLASS_NAME_KEBAB}}.component';

const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
  title: '{{COMPONENT_CLASS_NAME}}',
  component: {{COMPONENT_CLASS_NAME}}Component,
  excludeStories: /.*Data$/,
  render: (args) => ({
    props: {
      ...args,
      pConn$: {
        resolveConfigProps: props => props,
        getConfigProps: () => {
          return configProps;
        },
        getStateProps: () => {
          return stateProps;
        },
        getActionsApi: () => {
          return {
            updateFieldValue: (propName, value) => {
              configProps.value = value;
            },
            triggerFieldChange: (propName, value) => {
              configProps.value = value;
            }
          };
        },
        clearErrorMessages: ({}) => {}
      } as any,
      formGroup$: new FormBuilder().group({})
    }
  })
};

export default meta;
type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;

export const {{COMPONENT_CLASS_NAME}}: Story = {
  args: {
    label$: configProps.label,
    helperText: configProps.helperText,
    placeholder: configProps.placeholder,
    testId: configProps.testId,
    bReadonly$: configProps.readOnly,
    bRequired$: configProps.required,
    displayMode$: configProps.displayMode
  }
};