import FieldComponent from './FieldComponent.vue';
import { Album, Flashlight } from 'lucide-vue-next';
import { StatusType } from '@/models/status-type.model';

export default {
  title: 'Composants/form/FieldComponent',
  component: FieldComponent,
};

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    FieldComponent,
    Flashlight,
    Album,
  },
  template: `
  <div style="border:1px solid grey; width: 400px;">
      <field v-bind="args">
        <template #icon-start v-if="args.iconStart">
          <Flashlight/>
        </template>
       slot for my input here
        <template #icon-end v-if="args.iconEnd">
          <Album/>
        </template>
      </field>
  </div>
      `,
});

export const Default = Template.bind({});
Default.args = {
  label: 'My label',
  ellipsisLabel: true,
  captions: ['Helping text'],
};

export const NoOverflow = Template.bind({});
NoOverflow.args = {
  label: 'My label looooooooooooooooooooooooooooooooooooooooooooooong',
  ellipsisLabel: false,
  captions: ['Helping text'],
};

export const Overflow = Template.bind({});
Overflow.args = {
  label: 'My label looooooooooooooooooooooooooooooooooooooooooooooong',
  ellipsisLabel: true,
  captions: ['Helping text'],
};

export const Small = Template.bind({});
Small.args = {
  small: true,
  label: 'My label',
  captions: ['Helping text'],
};

export const WithIcons = Template.bind({});
WithIcons.args = {
  label: 'My label',
  errors: ['Error1', 'Error2'],
  iconStart: true,
  iconEnd: true,
};
export const WithCaptionsMode = Template.bind({});
WithCaptionsMode.args = {
  label: 'My label',
  captions: [
    { label: 'Caption for field 1', mode: StatusType.Default },
    { label: 'Caption for field 2', mode: StatusType.Success },
    { label: 'Caption for field 3', mode: StatusType.Warning },
    { label: 'Caption for field 4', mode: StatusType.Danger },
  ],
};

export const WithHelper = Template.bind({});
WithHelper.args = {
  label: 'My label',
  helperText: 'This is a helper text',
};

export const Required = Template.bind({});
Required.args = {
  label: 'My label',
  required: true,
};

export const Optional = Template.bind({});
Optional.args = {
  label: 'My label',
  optional: true,
};

export const Error = Template.bind({});
Error.args = {
  label: 'My label',
  errors: ['Error1', 'Error2'],
};
