import { useState } from 'react';

import type { Meta, StoryObj } from '@storybook/react';

import {{COMPONENT_CLASS_NAME}} from './index';
import { configProps, fieldMetadata } from './mock';

const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
  title: '{{COMPONENT_CLASS_NAME}}',
  component: {{COMPONENT_CLASS_NAME}},
  excludeStories: /.*Data$/
};

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

export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
  const [value, setValue] = useState(configProps.value);

  const props = {
    value,
    placeholder: configProps.placeholder,
    fieldMetadata,
    getPConnect: () => {
      return {
        getActionsApi: () => {
          return {
            updateFieldValue: (propName, theValue) => {
              setValue(theValue);
            },
            triggerFieldChange: (propName, theValue) => {
              setValue(theValue);
            }
          };
        },
        getStateProps: () => {
          return { value: '.name' };
        }
      };
    },
    onChange: event => {
      setValue(event.target.value);
    },
    onBlur: () => {
      return configProps.value;
    }
  };

  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
};

Base{{COMPONENT_CLASS_NAME}}.args = {
  label: configProps.label,
  helperText: configProps.helperText,
  testId: configProps.testId,
  readOnly: configProps.readOnly,
  disabled: configProps.disabled,
  required: configProps.required,
  status: configProps.status,
  hideLabel: configProps.hideLabel,
  displayMode: configProps.displayMode,
  validatemessage: configProps.validatemessage
};