import BmsAutocomplete from '@/components/form/BmsAutocomplete.vue';
import { Cat, Heart, Wheat } from 'lucide-vue-next';

import template from '@/documentation/template_field_dependency.mdx';
import { DEFAULT_FIELD_INPUT } from '../../../.storybook/constants';

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  tags: ['with_useable_code'],
  title: 'Composants/form/Autocomplete',
  component: BmsAutocomplete,
  argTypes: {},
};

const Template = (args) => ({
  components: {
    BmsAutocomplete,
  },
  setup() {
    return { args };
  },
  template: `
  <div style="display:flex; gap:1em">
    <BmsAutocomplete v-bind="args" />
    <BmsAutocomplete v-bind="{...args, small:true}"/>
  </div>
    `,
});

export const Default = Template.bind({});
Default.args = {
  ...DEFAULT_FIELD_INPUT,
  label: 'My autocomplete field',
  options: [
    { label: 'titi', value: 'i' },
    { label: 'toto', value: 'o' },
    { label: 'tutu', value: 'u' },
  ],
  modelValue: '',
};

export const Disabled = Template.bind({});
Disabled.args = {
  ...DEFAULT_FIELD_INPUT,
  label: 'My autocomplete field',
  options: [
    { label: 'titi', value: 'i' },
    { label: 'toto', value: 'o' },
    { label: 'tutu', value: 'u' },
  ],
  modelValue: 'u',
  disabled: true,
};

export const Loading = Template.bind({});
Loading.args = {
  ...DEFAULT_FIELD_INPUT,
  label: 'My autocomplete field',
  loading: true,
  options: [
    { label: 'titi', value: 'i' },
    { label: 'toto', value: 'o' },
    { label: 'tutu', value: 'u' },
  ],
  modelValue: '',
};

export const WithStringArray = Template.bind({});
WithStringArray.args = {
  ...DEFAULT_FIELD_INPUT,
  label: 'My autocomplete field',
  options: ['titi', 'toto', 'tutu'],
  modelValue: '',
  open: true,
};

export const WithValue = Template.bind({});
WithValue.args = {
  ...DEFAULT_FIELD_INPUT,
  label: 'My autocomplete field',
  options: [
    { label: 'titi', value: 'i' },
    { label: 'toto', value: 'o' },
    { label: 'tutu', value: 'u' },
  ],
  modelValue: 'i',
};

export const Opened = Template.bind({});
Opened.parameters = { pseudo: { focus: 'input' } };
Opened.args = {
  ...DEFAULT_FIELD_INPUT,
  label: 'My autocomplete field',
  options: [
    { label: 'titi', value: 'i' },
    { label: 'toto', value: 'o' },
    { label: 'tutu', value: 'u' },
  ],
  modelValue: '',
  open: true,
};
export const IconsWithValue = Template.bind({});
IconsWithValue.args = {
  ...DEFAULT_FIELD_INPUT,
  label: 'My autocomplete field',
  options: [
    { label: 'titi', value: 'i', icon: Heart },
    { label: 'toto', value: 'o', icon: Cat },
    { label: 'tutu', value: 'u', icon: Wheat },
  ],
  modelValue: 'i',
};

export const IconsOpened = Template.bind({});
IconsOpened.parameters = { pseudo: { focus: 'input' } };
IconsOpened.args = {
  ...DEFAULT_FIELD_INPUT,
  label: 'My autocomplete field',
  options: [
    { label: 'titi', value: 'i', icon: Heart },
    { label: 'toto', value: 'o', icon: Cat },
    {
      label: 'tutu',
      value: 'u',
      icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug"><path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/></svg>`,
    },
  ],
  modelValue: '',
  open: true,
};
