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

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

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

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsSearch,
  },
  template: `
    <BmsSearch v-bind="args"/>
    <br/>
    <BmsSearch v-bind="{...args, small:true}"/>
  `,
});

export const Default = Template.bind({});
Default.args = {
  placeholder: 'Placeholder',
  captions: ['There is more information'],
};

export const WithValue = Template.bind({});
WithValue.args = {
  modelValue: 'Une valeur',
};

export const Disabled = Template.bind({});
Disabled.args = {
  modelValue: 'Une valeur',
  disabled: true,
};

export const CustomPlaceholder = Template.bind({});
CustomPlaceholder.args = {
  placeholder: 'Type here !!!!!',
};

export const Captions = Template.bind({});
Captions.args = {
  captions: ['Very good info', 'Yes yes'],
};

export const Errors = Template.bind({});
Errors.args = {
  errors: ['Very bad errors', 'No no'],
};

export const WithFocusState = {
  args: {
    modelValue: '',
  },

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

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

// Playground with default values for documentation
export const PlaygroundSearch = SimpleTemplate.bind({});
PlaygroundSearch.parameters = { chromatic: { disable: true } };
PlaygroundSearch.args = {
  placeholder: 'Search...',
  modelValue: '',
};

// Do: Search with clear placeholder
export const DoWithClearPlaceholder = SimpleTemplate.bind({});
DoWithClearPlaceholder.parameters = { chromatic: { disable: true } };
DoWithClearPlaceholder.args = {
  placeholder: 'Search products...',
  modelValue: '',
};

// Do: Search with value and clear button
export const DoWithValue = SimpleTemplate.bind({});
DoWithValue.parameters = { chromatic: { disable: true } };
DoWithValue.args = {
  placeholder: 'Search...',
  modelValue: 'search term',
};

// Do: Disabled state
export const DoDisabled = SimpleTemplate.bind({});
DoDisabled.parameters = { chromatic: { disable: true } };
DoDisabled.args = {
  placeholder: 'Search...',
  modelValue: 'search term',
  disabled: true,
};

// Do: Search with error feedback
export const DoWithErrorFeedback = SimpleTemplate.bind({});
DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
DoWithErrorFeedback.args = {
  placeholder: 'Search...',
  modelValue: 'invalid search',
  errors: ['Search query is too short'],
};

// Don't: Generic placeholder
export const DontGenericPlaceholder = SimpleTemplate.bind({});
DontGenericPlaceholder.parameters = { chromatic: { disable: true } };
DontGenericPlaceholder.args = {
  placeholder: 'Type here',
  modelValue: '',
};

export const DoSpecificPlaceholder = SimpleTemplate.bind({});
DoSpecificPlaceholder.parameters = { chromatic: { disable: true } };
DoSpecificPlaceholder.args = {
  placeholder: 'Search by name, email, or ID...',
  modelValue: '',
};

// Don't: No error feedback
export const DontNoErrorFeedback = SimpleTemplate.bind({});
DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
DontNoErrorFeedback.args = {
  placeholder: 'Search...',
  modelValue: 'invalid',
};

// Don't: Search without placeholder
export const DontNoPlaceholder = SimpleTemplate.bind({});
DontNoPlaceholder.parameters = { chromatic: { disable: true } };
DontNoPlaceholder.args = {
  modelValue: '',
};
