import BmsInputRadioCaptionGroup from '@/components/form/BmsInputRadioCaptionGroup.vue';
import BmsInputRadioCaption from '@/components/form/BmsInputRadioCaption.vue';
import { StatusType } from '@/models/status-type.model';
import { ref } from 'vue';

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

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

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsInputRadioCaptionGroup,
    BmsInputRadioCaption,
  },
  template: `
      <BmsInputRadioCaptionGroup v-bind="args" v-model="args.modelValue">
        <template v-if="args.slot" #default>
          <BmsInputRadioCaption v-model='args.modelValue' value='toto' name='sameName' :captions="['Caption']">
            <template #label><span>toto</span></template>
          </BmsInputRadioCaption>
          <BmsInputRadioCaption v-model='args.modelValue' value='titi' name='sameName' :captions="['Caption']">
            <template #label><span>titi</span></template>
          </BmsInputRadioCaption>
        </template>
      </BmsInputRadioCaptionGroup>
    `,
});

export const DefaultRow = Template.bind({});
DefaultRow.args = {
  options: [
    { value: 'tata', label: 'Tata', captions: ['Caption for tata'] },
    { value: 'titi', label: 'Titi', captions: ['Caption for titi'] },
    { value: 'toto', label: 'Toto', captions: ['Caption for toto'] },
    { value: 'tutu', label: 'Tutu', captions: ['Caption for tutu'] },
  ],
  captions: [
    { label: 'Caption for group' },
    { label: 'Caption for group', mode: StatusType.Success },
  ],
  modelValue: '',
  label: 'This is a field label',
};

export const DefaultColumn = Template.bind({});
DefaultColumn.args = {
  options: [
    { value: 'tata', captions: ['Caption for tata'] },
    { value: 'titi', captions: ['Caption for titi'] },
    { value: 'toto', captions: ['Caption for toto'] },
    { value: 'tutu', captions: ['Caption for tutu'] },
  ],
  modelValue: '',
  label: 'This is a field label',
  align: 'column',
};

export const WithCaptionMode = Template.bind({});
WithCaptionMode.args = {
  options: [
    {
      value: 'tata',
      label: 'Tata',
      captions: [{ label: 'Caption for tata', mode: StatusType.Default }],
    },
    {
      value: 'titi',
      label: 'Titi',
      captions: [{ label: 'Caption for titi', mode: StatusType.Success }],
    },
    {
      value: 'toto',
      label: 'Toto',
      captions: [{ label: 'Caption for toto', mode: StatusType.Warning }],
    },
    {
      value: 'tutu',
      label: 'Tutu',
      captions: [{ label: 'Caption for tutu', mode: StatusType.Danger }],
    },
  ],
  modelValue: '',
  label: 'This is a field label',
};

export const DefaultSelected = Template.bind({});
DefaultSelected.args = {
  options: [
    { value: 'tata', captions: ['Caption for tata'] },
    { value: 'titi', captions: ['Caption for titi'] },
    { value: 'toto', captions: ['Caption for toto'] },
    { value: 'tutu', captions: ['Caption for tutu'] },
  ],
  modelValue: 'toto',
  label: 'This is a field label',
};

export const FullHelp = Template.bind({});
FullHelp.args = {
  options: [
    { value: 'tata', captions: ['Caption for tata'] },
    { value: 'titi', captions: ['Caption for titi'] },
    { value: 'toto', captions: ['Caption for toto'] },
    { value: 'tutu', captions: ['Caption for tutu'] },
  ],
  modelValue: 'toto',
  label: 'This is a field label',
  helperText: 'this is a help',
  captions: ['Caption 1', 'Caption 2'],
};

export const Disabled = Template.bind({});
Disabled.args = {
  options: [
    { value: 'tata', captions: ['Caption for tata'] },
    { value: 'titi', captions: ['Caption for titi'] },
    { value: 'toto', captions: ['Caption for toto'] },
    { value: 'tutu', captions: ['Caption for tutu'] },
  ],
  modelValue: 'toto',
  label: 'This is a field label',
  disabled: true,
};

export const Required = Template.bind({});
Required.args = {
  options: [
    { value: 'tata', captions: ['Caption for tata'] },
    { value: 'titi', captions: ['Caption for titi'] },
    { value: 'toto', captions: ['Caption for toto'] },
    { value: 'tutu', captions: ['Caption for tutu'] },
  ],
  modelValue: 'toto',
  label: 'This is a field label',
  required: true,
};

export const Errors = Template.bind({});
Errors.args = {
  options: [
    { value: 'tata', captions: ['Caption for tata'] },
    { value: 'titi', captions: ['Caption for titi'] },
    { value: 'toto', captions: ['Caption for toto'] },
    { value: 'tutu', captions: ['Caption for tutu'] },
  ],
  modelValue: 'toto',
  label: 'This is a field label',
  errors: ['Error 1', 'Error 2'],
};

export const Slot = Template.bind({});
Slot.args = {
  modelValue: 'toto',
  label: 'This is a field label',
  slot: true,
};

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

// Playground with default values for documentation
export const PlaygroundRadioCaptionGroup = SimpleTemplate.bind({});
PlaygroundRadioCaptionGroup.parameters = { chromatic: { disable: true } };
PlaygroundRadioCaptionGroup.args = {
  label: 'Payment method',
  modelValue: '',
  options: [
    {
      value: 'credit',
      label: 'Credit Card',
      captions: ['Visa, Mastercard, Amex'],
    },
    { value: 'paypal', label: 'PayPal', captions: ['Pay with PayPal account'] },
    {
      value: 'bank',
      label: 'Bank Transfer',
      captions: ['Direct bank transfer'],
    },
  ],
};

// Do: Radio caption group with clear labels
export const DoWithClearLabels = SimpleTemplate.bind({});
DoWithClearLabels.parameters = { chromatic: { disable: true } };
DoWithClearLabels.args = {
  label: 'Subscription plan',
  modelValue: '',
  options: [
    { value: 'basic', label: 'Basic', captions: ['$9/month'] },
    { value: 'pro', label: 'Pro', captions: ['$29/month'] },
    { value: 'enterprise', label: 'Enterprise', captions: ['Custom pricing'] },
  ],
};

// Do: Radio caption group with helpful captions
export const DoWithHelpfulCaptions = SimpleTemplate.bind({});
DoWithHelpfulCaptions.parameters = { chromatic: { disable: true } };
DoWithHelpfulCaptions.args = {
  label: 'Delivery option',
  modelValue: '',
  options: [
    { value: 'standard', label: 'Standard', captions: ['5-7 business days'] },
    { value: 'express', label: 'Express', captions: ['2-3 business days'] },
    { value: 'overnight', label: 'Overnight', captions: ['Next business day'] },
  ],
};

// Do: Radio caption group with error feedback
export const DoWithErrorFeedback = SimpleTemplate.bind({});
DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
DoWithErrorFeedback.args = {
  label: 'Payment method',
  modelValue: '',
  errors: ['Please select a payment method'],
  options: [
    { value: 'credit', label: 'Credit Card', captions: ['Visa, Mastercard'] },
    { value: 'paypal', label: 'PayPal', captions: ['Pay with PayPal'] },
  ],
};

// Don't: Missing labels
export const DontNoLabel = SimpleTemplate.bind({});
DontNoLabel.parameters = { chromatic: { disable: true } };
DontNoLabel.args = {
  modelValue: '',
  options: [
    { value: 'option1', label: 'Option 1', captions: ['Description'] },
    { value: 'option2', label: 'Option 2', captions: ['Description'] },
  ],
};

export const DoWithLabel = SimpleTemplate.bind({});
DoWithLabel.parameters = { chromatic: { disable: true } };
DoWithLabel.args = {
  label: 'Choose an option',
  modelValue: '',
  options: [
    { value: 'option1', label: 'Option 1', captions: ['Description'] },
    { value: 'option2', label: 'Option 2', captions: ['Description'] },
  ],
};

// Don't: No captions when needed
export const DontNoCaptions = SimpleTemplate.bind({});
DontNoCaptions.parameters = { chromatic: { disable: true } };
DontNoCaptions.args = {
  label: 'Subscription plan',
  modelValue: '',
  options: [
    { value: 'basic', label: 'Basic' },
    { value: 'pro', label: 'Pro' },
    { value: 'enterprise', label: 'Enterprise' },
  ],
};

// Do: Radio caption group in column layout
export const DoWithColumnLayout = SimpleTemplate.bind({});
DoWithColumnLayout.parameters = { chromatic: { disable: true } };
DoWithColumnLayout.args = {
  label: 'Delivery option',
  modelValue: '',
  align: 'column',
  options: [
    {
      value: 'standard',
      label: 'Standard Delivery',
      captions: ['5-7 business days - Free'],
    },
    {
      value: 'express',
      label: 'Express Delivery',
      captions: ['2-3 business days - $10'],
    },
    {
      value: 'overnight',
      label: 'Overnight Delivery',
      captions: ['Next business day - $25'],
    },
  ],
};
