import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import { createGroups } from '../../../helpers/storybook';
import { MaskedSingleLineText } from './MaskedSingleLineText';

const groups = createGroups({
  Behavior: [
    'autoComplete',
    'autoFocus',
    'disabled',
    'inlineMode',
    'name',
    'id',
    'innerRef',
    'mask',
    'overwrite',
    'placeholderChar',
    'lazy',
  ],
  Content: [
    'label',
    'placeholder',
    'error',
    'tooltipContent',
    'value',
    'defaultValue',
  ],
  Styling: ['className'],
  Events: ['onChange', 'onBlur', 'onFocus'],
});

const meta: Meta<typeof MaskedSingleLineText> = {
  title: 'Primary Components/Form Elements/MaskedSingleLineText',
  component: MaskedSingleLineText,
  argTypes: {
    ...groups,
  },
};
export default meta;

export const Main: StoryObj<typeof MaskedSingleLineText> = {
  args: {
    name: 'timestamp',
    label: 'Timestamp',
    mask: '00:00:00.000',
    placeholderChar: '0',
    lazy: false,
  },
  render: (args) =>
    React.createElement(() => {
      const [value, setValue] = useState<string>();

      return (
        <MaskedSingleLineText
          {...args}
          value={value}
          onChange={(e) => {
            action('onChange')(e);
            setValue(value);
          }}
        />
      );
    }),
};
