import BmsSelect from '@/components/form/BmsSelect.vue';
import { within } from 'storybook/test';
import { ref } from 'vue';

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

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

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

export const Default = Template.bind({});
Default.args = {
  label: 'My label',
  captions: ['Helping text'],
  modelValue: '',
  options: [
    { label: 'azerty', value: 'a' },
    { label: 'b', value: 'b' },
  ],
};

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: 'a', value: 'a' },
    { label: 'b', value: 'b' },
  ],
};

export const WithValue = Template.bind({});
WithValue.args = {
  label: 'My label',
  modelValue: 'a',
  options: [
    { label: 'a', value: 'a' },
    { label: 'b', value: 'b' },
  ],
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: 'My label',
  modelValue: 'a',
  options: [
    { label: 'azerty', value: 'a' },
    { label: 'b', value: 'b' },
  ],
  disabled: true,
};

export const WithFocusState = {
  args: {
    label: 'My label',
    options: [
      { label: 'titi', value: 'titi' },
      { label: 'toto', value: 'toto' },
      { label: 'tutu', value: 'tutu' },
    ],
    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: 'Une valeur',
  options: [
    { label: 'a', value: 'a' },
    { label: 'b', value: 'b' },
  ],
  open: true,
};

export const WithErrors = Template.bind({});
WithErrors.args = {
  label: 'My label',
  modelValue: 'Une valeur',
  options: [
    { label: 'a', value: 'a' },
    { label: 'b', value: 'b' },
  ],
  errors: ['error 1', 'error 2'],
};

export const WithObjectValue = Template.bind({});
WithObjectValue.args = {
  label: 'My label',
  modelValue: { a1: 'a', a2: 'a' },
  options: [
    { label: 'a', value: { a1: 'a', a2: 'a' } },
    { label: 'b', value: { b1: 'b', b2: 'b' } },
  ],
};

export const WithIncorrectValue = Template.bind({});
WithIncorrectValue.args = {
  label: 'My label',
  modelValue: 'a',
  options: [
    { label: 'b', value: 'b' },
    { label: 'c', value: 'c' },
  ],
};

// Simple template for documentation (without small variant)
const SimpleTemplate = (args) => ({
  setup() {
    const modelValue = ref(args.modelValue || '');
    return { args, modelValue };
  },
  components: {
    BmsSelect,
  },
  template: `
  <BmsSelect v-bind="args" v-model="modelValue" />
  `,
});

// Playground with default values for documentation
export const PlaygroundSelect = SimpleTemplate.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' },
  ],
};

// Do: Simple select with label
export const DoWithLabel = SimpleTemplate.bind({});
DoWithLabel.parameters = { chromatic: { disable: true } };
DoWithLabel.args = {
  label: 'Country',
  modelValue: '',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
};

// Do: Select with placeholder
export const DoWithPlaceholder = SimpleTemplate.bind({});
DoWithPlaceholder.parameters = { chromatic: { disable: true } };
DoWithPlaceholder.args = {
  label: 'Country',
  placeholder: 'Choose your country',
  modelValue: '',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
};

// Do: Select with caption
export const DoWithCaption = SimpleTemplate.bind({});
DoWithCaption.parameters = { chromatic: { disable: true } };
DoWithCaption.args = {
  label: 'Payment method',
  placeholder: 'Select payment method',
  modelValue: '',
  captions: ['We accept all major credit cards'],
  options: [
    { label: 'Credit Card', value: 'cc' },
    { label: 'PayPal', value: 'pp' },
    { label: 'Bank Transfer', value: 'bt' },
  ],
};

// Do: Disabled state
export const DoDisabled = SimpleTemplate.bind({});
DoDisabled.parameters = { chromatic: { disable: true } };
DoDisabled.args = {
  label: 'Country',
  modelValue: 'fr',
  disabled: true,
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
};

// Do: Loading state
export const DoLoading = SimpleTemplate.bind({});
DoLoading.parameters = { chromatic: { disable: true } };
DoLoading.args = {
  label: 'Country',
  placeholder: 'Loading...',
  loading: true,
  modelValue: '',
  options: [],
};

// Do: Select with error feedback
export const DoWithErrorFeedback = SimpleTemplate.bind({});
DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
DoWithErrorFeedback.args = {
  label: 'Country',
  placeholder: 'Select a country',
  modelValue: '',
  errors: ['Please select a country'],
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
    { label: 'Spain', value: 'es' },
  ],
};

// Do: Select with helpful caption
export const DoWithHelpfulCaption = SimpleTemplate.bind({});
DoWithHelpfulCaption.parameters = { chromatic: { disable: true } };
DoWithHelpfulCaption.args = {
  label: 'Payment method',
  placeholder: 'Select payment method',
  modelValue: '',
  captions: ['Select your preferred payment method to proceed'],
  errors: ['Payment method is required'],
  options: [
    { label: 'Credit Card', value: 'cc' },
    { label: 'PayPal', value: 'pp' },
    { label: 'Bank Transfer', value: 'bt' },
  ],
};

// Don't: Long labels
export const DontLongLabel = SimpleTemplate.bind({});
DontLongLabel.parameters = { chromatic: { disable: true } };
DontLongLabel.args = {
  label:
    'Please select the country where you currently reside and where you would like to receive your shipment',
  placeholder: 'Country',
  modelValue: '',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
  ],
};

export const DoShortLabel = SimpleTemplate.bind({});
DoShortLabel.parameters = { chromatic: { disable: true } };
DoShortLabel.args = {
  label: 'Country',
  placeholder: 'Select country',
  modelValue: '',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
  ],
};

// Don't: No label
export const DontNoLabel = SimpleTemplate.bind({});
DontNoLabel.parameters = { chromatic: { disable: true } };
DontNoLabel.args = {
  placeholder: 'Select an option',
  modelValue: '',
  options: [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ],
};

// Don't: Generic placeholder
export const DontGenericPlaceholder = SimpleTemplate.bind({});
DontGenericPlaceholder.parameters = { chromatic: { disable: true } };
DontGenericPlaceholder.args = {
  label: 'Country',
  placeholder: 'Select',
  modelValue: '',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
  ],
};

export const DoSpecificPlaceholder = SimpleTemplate.bind({});
DoSpecificPlaceholder.parameters = { chromatic: { disable: true } };
DoSpecificPlaceholder.args = {
  label: 'Country',
  placeholder: 'Choose your country',
  modelValue: '',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
  ],
};

// Don't: No error feedback
export const DontNoErrorFeedback = SimpleTemplate.bind({});
DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
DontNoErrorFeedback.args = {
  label: 'Country',
  placeholder: 'Select a country',
  modelValue: '',
  options: [
    { label: 'France', value: 'fr' },
    { label: 'Germany', value: 'de' },
  ],
};

// Don't: No caption for complex requirements
export const DontNoCaption = SimpleTemplate.bind({});
DontNoCaption.parameters = { chromatic: { disable: true } };
DontNoCaption.args = {
  label: 'Payment method',
  placeholder: 'Select payment method',
  modelValue: '',
  errors: ['Error'],
  options: [
    { label: 'Credit Card', value: 'cc' },
    { label: 'PayPal', value: 'pp' },
  ],
};
