import {createFormCentricElement} from "./FormElementFormCentricComponent";

export default {
  title: 'Components/Form Element Form Centric',
  args: {
    inputType: 'text',
  },
  argTypes: {
    inputType: {
      control: 'select',
      options: ['text', 'checkbox', 'radio', 'select', 'password', 'textarea'],
    }
  }
}

const Template = ({...args}) => {
  return createFormCentricElement({...args});
};

export const TextFormCentricElement = Template.bind({});
TextFormCentricElement.args = {
  inputType: 'text',
  isRequired: true,
  placeholder: 'Platzhalter',
};

export const CheckboxFormCentricElement = Template.bind({});
CheckboxFormCentricElement.args = {
  inputType: 'checkbox',
  isRequired: true,
  label: 'Ich akzeptiere die <a href="#">Datenschutzbestimmungen</a>.',
};

export const RadioFormCentricElement = Template.bind({});
RadioFormCentricElement.args = {
  inputType: 'radio',
  isRequired: true,
  label: 'Option 1',
  id: 'option1',
  label2: 'Option 2',
  id2: 'option2'
};

export const SelectFormCentricElement = Template.bind({});
SelectFormCentricElement.args = {
  inputType: 'select',
  label: 'Auswahl',
  isRequired: true,
};

export const TextareaFormCentricElement = Template.bind({});
TextareaFormCentricElement.args = {
  inputType: 'textarea',
  placeholder: 'Platzhalter',
  label: 'Ihre Nachricht',
  isRequired: true,
};

export const CheckboxGroupFormCentricElement = Template.bind({});
CheckboxGroupFormCentricElement.args = {
  inputType: 'checkboxGroup',
  isRequired: true,
  label: 'Ich akzeptiere die <a href="#">Datenschutzbestimmungen</a>.',
};

export const FileFormCentricElement = Template.bind({});
FileFormCentricElement.args = {
  inputType: 'file',
  isRequired: true,
};
