import BmsCombobox from '@/components/form/BmsCombobox.vue';
import BmsChip from '@/components/form/BmsChip.vue';
import { within } from 'storybook/test';
import { ref } from 'vue';
import { Plug } from 'lucide-vue-next';

import template from '@/documentation/template_field_dependency.mdx';

export default {
  title: 'Composants/form/Combobox',
  component: BmsCombobox,
  parameters: {
    docs: {
      page: template,
    },
  },
};

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsCombobox,
    Plug,
  },
  template: `
    <BmsCombobox v-bind="args" v-model="args.modelValue">
      <template #icon-start v-if="args.showIcon">
        <Plug :size="16" />
      </template>
      <template #icon-end v-if="args.showIcon">
        <Plug :size="16" />
      </template>
      </BmsCombobox>
  `,
});

export const Default = Template.bind({});
Default.args = {
  label: 'My label',
  captions: ['Helping text'],
  modelValue: 'fr',
  options: [
    { label: 'France', value: 'fr', icon: '🇫🇷' },
    { label: 'Germany', value: 'de', icon: '🇩🇪' },
    { label: 'Spain', value: 'es', icon: '🇪🇸' },
  ],
};

export const WithStartIcon = Template.bind({});
WithStartIcon.args = {
  label: 'My label',
  modelValue: 'fr',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
};
WithStartIcon.args.showIcon = true;

export const Small = Template.bind({});
Small.args = {
  label: 'My label',
  captions: ['Helping text'],
  small: true,
  modelValue: 'fr',
  options: [
    { label: 'France', value: 'fr', icon: '🇫🇷' },
    { label: 'Germany', value: 'de', icon: '🇩🇪' },
    { label: 'Spain', value: 'es', icon: '🇪🇸' },
  ],
};
export const Autocomplete = Template.bind({});
Autocomplete.args = {
  label: 'My label',
  captions: ['Helping text'],
  modelValue: 'fr',
  autocomplete: true,
  options: [
    { label: 'France', value: 'fr', icon: '🇫🇷' },
    { label: 'Germany', value: 'de', icon: '🇩🇪' },
    { label: 'Spain', value: 'es', icon: '🇪🇸' },
  ],
};
export const MultipleSelected = Template.bind({});
MultipleSelected.args = {
  label: 'My label',
  captions: ['Helping text'],
  modelValue: ['fr', 'de'],
  multiple: true,
  options: [
    { label: 'France', value: 'fr', icon: '🇫🇷' },
    { label: 'Germany', value: 'de', icon: '🇩🇪' },
    { label: 'Spain', value: 'es', icon: '🇪🇸' },
  ],
};

export const Loading = Template.bind({});
Loading.args = {
  label: 'My label',
  captions: ['Helping text'],
  loading: true,
  modelValue: '',
  options: [],
};

export const WithPlaceholder = Template.bind({});
WithPlaceholder.args = {
  label: 'My label',
  captions: ['Helping text'],
  placeholder: 'This is a placeholder',
  modelValue: '',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
};

export const WithValue = Template.bind({});
WithValue.args = {
  label: 'My label',
  modelValue: 'fr',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: 'My label',
  modelValue: 'fr',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
  disabled: true,
};

export const WithFocusState = {
  args: {
    label: 'My label',
    options: [
      { label: 'France', value: 'fr' },
      { label: 'Germany', value: 'de' },
      { label: 'Spain', value: 'es' },
    ],
    modelValue: '',
  },

  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await canvas.getByRole('input').click();
    await canvas.getByRole('input').focus();
  },
};

export const Opened = Template.bind({});
Opened.parameters = { pseudo: { focus: 'input:first-of-type' } }; //TODO sélecteur CSS plus propre
Opened.args = {
  label: 'My label',
  modelValue: 'fr',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
  open: true,
};

export const WithErrors = Template.bind({});
WithErrors.args = {
  label: 'My label',
  modelValue: 'fr',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
  errors: ['error 1', 'error 2'],
};

export const WithIncorrectValue = Template.bind({});
WithIncorrectValue.args = {
  label: 'My label',
  modelValue: 'us',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
};

export const Overflow = Template.bind({});
Overflow.args = {
  label: 'My label',
  captions: ['Helping text'],
  modelValue: 'fr',
  open: true,
  options: [
    {
      label:
        'France - Mollit esse eu in laboris amet aliquip id. Sint ut enim irure occaecat nostrud id commodo sit id ex culpa adipisicing ad sint. Id sint occaecat consectetur esse est nulla enim pariatur. Non cillum nisi aliqua esse amet ea deserunt id sunt proident culpa adipisicing ipsum esse.',
      value: 'fr',
      icon: '🇫🇷',
    },
    { label: 'Germany', value: 'de', icon: '🇩🇪' },
    { label: 'Spain', value: 'es', icon: '🇪🇸' },
  ],
};

// Playground with default values for documentation
export const PlaygroundSelect = Template.bind({});
PlaygroundSelect.parameters = { chromatic: { disable: true } };
PlaygroundSelect.args = {
  label: 'Country',
  placeholder: 'Select a country',
  modelValue: '',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
    { label: 'Italy', value: 'it' },
  ],
};

const TemplateWithSlots = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsCombobox,
    BmsChip,
  },
  template: `
      <BmsCombobox v-model="args.modelValue" v-bind="args" v-model:searching="searching">      
        <template #option="{option, isSelected}">     
        <span v-if="isSelected">x</span> 
          <BmsChip>
            {{option?.label}}
          </BmsChip>  
        </template>   
        <template #new-option="{newOption}">        
          custom add new option : {{newOption}}
        </template>
        <template #selected-items="{selectedItems, dismiss}">
          <span v-for="item in selectedItems">
            <BmsChip>
              {{item?.label}}
              <button @click="()=>dismiss(item.value)">X</button>
            </BmsChip> 
          </span>
        </template>
        <template #selected-item="{ selectedItem }">
          <BmsChip>
            {{selectedItem?.label}}
            </BmsChip> 
        </template>
        <template #input-element>
          <input  v-model="searching"/>
        </template>
      </BmsCombobox>
    `,
});

export const WithSlotsMultiple = TemplateWithSlots.bind({});
WithSlotsMultiple.args = {
  label: 'My label',
  modelValue: ['fr'],
  canAddNewOption: true,
  autocomplete: true,
  multiple: true,
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
  open: true,
};

export const WithSlots = TemplateWithSlots.bind({});
WithSlots.args = {
  label: 'My label',
  modelValue: 'fr',
  canAddNewOption: true,
  autocomplete: true,
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
  open: true,
};
