import { Meta, StoryObj } from '@storybook/react';
import { Field, Formik } from 'formik';
import React from 'react';
import { noop } from '../../helpers/utils';
import { CustomTagsField, SingleLineTextField } from '../FormElements';
import { FieldSelection } from './FieldSelection';

const meta: Meta<typeof FieldSelection> = {
  title: 'Other Components/FieldSelection',
  component: FieldSelection,
};
export default meta;

export const Default: StoryObj<typeof FieldSelection> = {
  render: () => (
    <Formik initialValues={{}} onSubmit={noop}>
      <>
        <FieldSelection>
          <Field label="Title" name={'title'} as={SingleLineTextField} />
          <Field label="Tags ( Add )" name={'tagsAdd'} as={CustomTagsField} />
          <Field
            label="Tags ( Remove )"
            name={'tagsRemove'}
            as={CustomTagsField}
          />
        </FieldSelection>
      </>
    </Formik>
  ),
};
