import BmsInputText from '@/components/form/BmsInputText.vue';
import { within } from 'storybook/test';
import { BookOpen, CloudLightning, Mail, Eye } from 'lucide-vue-next';
import template from '@/documentation/template_field_dependency.mdx';
import { ref } from 'vue';

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

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsInputText,
    BookOpen,
    CloudLightning,
  },
  template: `
  <BmsInputText v-bind="args" v-model="args.modelValue">
    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
  </BmsInputText>
  <br/>
  <BmsInputText v-bind="{...args, small:true}" v-model="args.modelValueSmall">
    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
  </BmsInputText>
  `,
});

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

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

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

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

export const WithIcons = Template.bind({});
WithIcons.args = {
  label: 'My label',
  modelValue: 'Une valeur',
  modelValueSmall: 'Une valeur',
  iconStart: true,
  iconEnd: true,
};

export const WithLimitEqual = Template.bind({});
WithLimitEqual.args = {
  label: 'My label',
  modelValue: 'Un texte pilpoil',
  modelValueSmall: 'too short',
  maxlength: 16,
};

export const WithLimitAndEmptyValue = Template.bind({});
WithLimitAndEmptyValue.args = {
  label: 'My label',
  modelValue: null,
  modelValueSmall: undefined,
  maxlength: 15,
  minlength: 1,
};

export const WithLimitExceeded = Template.bind({});
WithLimitExceeded.args = {
  label: 'My label',
  modelValue: 'Une texte trop long pour la borne max',
  modelValueSmall: 'too short',
  maxlength: 15,
  minlength: 10,
};

export const WithErrors = Template.bind({});
WithErrors.args = {
  label: 'My label',
  modelValue: 'Une valeur',
  modelValueSmall: 'Une valeur',
  errors: ['Error 1', 'Error 2'],
};

export const WithPattern = Template.bind({});
WithPattern.args = {
  modelValue: 'not email',
  modelValueSmall: 'Not an email',
  label: 'My label',
  placeholder: 'Placeholder',
  captions: ['There is more information'],
  pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$',
  patternMessage: 'La valeur ne correspond pas à une email',
  minlength: 15,
};

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

  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: {
    BmsInputText,
    BookOpen,
    CloudLightning,
  },
  template: `
  <BmsInputText v-bind="args" v-model="modelValue">
    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
  </BmsInputText>
  `,
});

// Playground with default values for documentation
export const PlaygroundInputText = SimpleTemplate.bind({});
PlaygroundInputText.parameters = { chromatic: { disable: true } };
PlaygroundInputText.args = {
  label: 'Email address',
  placeholder: 'example@email.com',
};

// Do: Simple input with label
export const DoWithLabel = SimpleTemplate.bind({});
DoWithLabel.parameters = { chromatic: { disable: true } };
DoWithLabel.args = {
  label: 'Full name',
  placeholder: 'John Doe',
};

// Do: Input with placeholder
export const DoWithPlaceholder = SimpleTemplate.bind({});
DoWithPlaceholder.parameters = { chromatic: { disable: true } };
DoWithPlaceholder.args = {
  label: 'Email address',
  placeholder: 'example@email.com',
};

// Do: Input with caption
export const DoWithCaption = SimpleTemplate.bind({});
DoWithCaption.parameters = { chromatic: { disable: true } };
DoWithCaption.args = {
  label: 'Password',
  placeholder: 'Enter your password',
  captions: ['Must be at least 8 characters'],
};

// Do: Input with icon at start
export const DoWithIconStart = () => ({
  components: { BmsInputText, Mail },
  setup() {
    const value = ref('');
    return { value };
  },
  template: `
    <BmsInputText 
      label="Email" 
      v-model="value"
      placeholder="example@email.com"
    >
      <template #icon-start><Mail /></template>
    </BmsInputText>
  `,
});
DoWithIconStart.parameters = { chromatic: { disable: true } };

// Do: Input with icon at end
export const DoWithIconEnd = () => ({
  components: { BmsInputText, Eye },
  setup() {
    const value = ref('');
    return { value };
  },
  template: `
    <BmsInputText 
      label="Password" 
      v-model="value"
      placeholder="Enter your password"
    >
      <template #icon-end><Eye /></template>
    </BmsInputText>
  `,
});
DoWithIconEnd.parameters = { chromatic: { disable: true } };

// Do: Input with both icons
export const DoWithIcons = () => ({
  components: { BmsInputText, Mail, Eye },
  setup() {
    const value = ref('');
    return { value };
  },
  template: `
    <BmsInputText 
      label="Email" 
      v-model="value"
      placeholder="example@email.com"
    >
      <template #icon-start><Mail /></template>
      <template #icon-end><Eye /></template>
    </BmsInputText>
  `,
});
DoWithIcons.parameters = { chromatic: { disable: true } };

// Do: Disabled state
export const DoDisabled = SimpleTemplate.bind({});
DoDisabled.parameters = { chromatic: { disable: true } };
DoDisabled.args = {
  label: 'Account ID',
  modelValue: 'ACC-12345',
  disabled: true,
};

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

// Do: Input with max length
export const DoWithMaxLength = SimpleTemplate.bind({});
DoWithMaxLength.parameters = { chromatic: { disable: true } };
DoWithMaxLength.args = {
  label: 'Username',
  placeholder: 'Enter username',
  maxlength: 20,
  modelValue: 'myusernameiswaytoolong',
};

// Do: Input with min and max length
export const DoWithMinMaxLength = SimpleTemplate.bind({});
DoWithMinMaxLength.parameters = { chromatic: { disable: true } };
DoWithMinMaxLength.args = {
  label: 'Password',
  placeholder: 'Enter password',
  minlength: 8,
  maxlength: 20,
  modelValue: 'pass123',
};

// Don't: Long labels
export const DontLongLabel = SimpleTemplate.bind({});
DontLongLabel.parameters = { chromatic: { disable: true } };
DontLongLabel.args = {
  label:
    'Please enter your complete full name including first name, middle name if applicable, and last name',
  placeholder: 'Name',
};

export const DoShortLabel = SimpleTemplate.bind({});
DoShortLabel.parameters = { chromatic: { disable: true } };
DoShortLabel.args = {
  label: 'Full name',
  placeholder: 'John Doe',
};

// Don't: No label
export const DontNoLabel = SimpleTemplate.bind({});
DontNoLabel.parameters = { chromatic: { disable: true } };
DontNoLabel.args = {
  placeholder: 'Enter your email',
};

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

export const DoSpecificPlaceholder = SimpleTemplate.bind({});
DoSpecificPlaceholder.parameters = { chromatic: { disable: true } };
DoSpecificPlaceholder.args = {
  label: 'Email',
  placeholder: 'example@email.com',
};

// Don't: Too many icons
export const DontTooManyIcons = () => ({
  components: { BmsInputText, Mail, Eye, BookOpen },
  setup() {
    const value = ref('');
    return { value };
  },
  template: `
    <BmsInputText 
      label="Email" 
      v-model="value"
      placeholder="example@email.com"
    >
      <template #icon-start>
        <Mail />
        <BookOpen />
      </template>
      <template #icon-end>
        <Eye />
        <BookOpen />
      </template>
    </BmsInputText>
  `,
});
DontTooManyIcons.parameters = { chromatic: { disable: true } };

export const DoOneIcon = () => ({
  components: { BmsInputText, Mail },
  setup() {
    const value = ref('');
    return { value };
  },
  template: `
    <BmsInputText 
      label="Email" 
      v-model="value"
      placeholder="example@email.com"
    >
      <template #icon-start><Mail /></template>
    </BmsInputText>
  `,
});
DoOneIcon.parameters = { chromatic: { disable: true } };

// Don't: No error feedback
export const DontNoErrorFeedback = SimpleTemplate.bind({});
DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
DontNoErrorFeedback.args = {
  label: 'Email',
  placeholder: 'email@example.com',
  modelValue: 'invalid-email',
};

export const DoWithErrorFeedback = SimpleTemplate.bind({});
DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
DoWithErrorFeedback.args = {
  label: 'Email',
  placeholder: 'email@example.com',
  modelValue: 'invalid-email',
  errors: ['Please enter a valid email address'],
};

// Don't: No caption for complex requirements
export const DontNoCaption = SimpleTemplate.bind({});
DontNoCaption.parameters = { chromatic: { disable: true } };
DontNoCaption.args = {
  label: 'Username',
  placeholder: 'Enter username',
  modelValue: 'JohnDoe',
  errors: ['Error'],
};

export const DoWithHelpfulCaption = SimpleTemplate.bind({});
DoWithHelpfulCaption.parameters = { chromatic: { disable: true } };
DoWithHelpfulCaption.args = {
  label: 'Username',
  placeholder: 'Enter username',
  modelValue: 'JohnDoe',
  errors: ['Username is already taken'],
};
