import Input from "./Input.vue";

export default {
  title: "Input",
  component: Input,
  argTypes: {
    item: Object,
  },
};

const Template = (args) => ({
  components: { Input },
  setup() {
    return { args };
  },
  template: '<Input v-bind="args" />',
});

export const Text = Template.bind({});
Text.args = {
  item: {
    id: "test",
    type: "text",
    label: "Tekst veld",
  },
};

export const Select = Template.bind({});
Select.args = {
  item: {
    id: "country",
    required: true,
    label: "Land",
    type: "select",
    placeholder: "Land",
    options: [
      { label: "België", value: "BE" },
      { label: "Nederland", value: "NL" },
      { label: "Duitsland", value: "DE" },
      { label: "Frankrijk", value: "FR" },
    ],
    value: null,
  },
};

export const TextArea = Template.bind({});
TextArea.args = {
  item: {
    id: "test",
    type: "textarea",
    label: "Tekst veld",
    placeholder: "Commentaar...",
    height: 400,
  },
};

export const RichText = Template.bind({});
RichText.args = {
  item: {
    id: "comment",
    label: "Commentaar",
    type: "rich",
    placeholder: "Beschrijf je vraag",
    value: "kaas",
  },
};

export const Money = Template.bind({});
Money.args = {
  item: {
    id: "money",
    type: "money",
    label: "Money",
    options: [],
  },
};

export const DatePicker = Template.bind({});
DatePicker.args = {
  item: {
    id: "date",
    required: true,
    label: "Datum",
    type: "date",
    placeholder: "Kies een dag",
    value: new Date(),
    configuration: {
      minDate: new Date(),
    },
  },
};

export const TimePicker = Template.bind({});
TimePicker.args = {
  item: {
    id: "time",
    required: true,
    label: "Tijd",
    type: "time",
    placeholder: "Kies een tijd",
    value: new Date(),
    configuration: {},
  },
};
