import BmsInputRadioGroup from '@/components/form/BmsInputRadioGroup.vue';
import BmsInputRadio from '@/components/form/BmsInputRadio.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/InputRadioGroup',
  component: BmsInputRadioGroup,
  parameters: {
    docs: {
      page: template,
    },
  },
};

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

export const DefaultRow = Template.bind({});
DefaultRow.args = {
  values: [
    { value: 'tata', label: 'Tata' },
    { value: 'titi', label: 'Titi' },
    { value: 'toto', label: 'Toto' },
    { value: 'tutu', label: 'Tutu' },
  ],
  modelValue: '',
  label: 'This is a field label',
};

export const Small = Template.bind({});
Small.args = {
  small: true,
  values: [
    { value: 'tata', label: 'Tata' },
    { value: 'titi', label: 'Titi' },
    { value: 'toto', label: 'Toto' },
    { value: 'tutu', label: 'Tutu' },
  ],
  modelValue: '',
  label: 'This is a field label',
};
export const DefaultColumn = Template.bind({});
DefaultColumn.args = {
  values: ['tata', 'titi', 'toto', 'tutu'],
  modelValue: '',
  label: 'This is a field label',
  align: 'column',
};

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

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

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

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

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

export const Slot = Template.bind({});
Slot.args = {
  values: ['tata', 'titi', 'toto', 'tutu'],
  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: {
    BmsInputRadioGroup,
  },
  template: `
  <BmsInputRadioGroup v-bind="args" v-model="modelValue" />
  `,
});

// Playground with default values for documentation
export const PlaygroundRadioGroup = SimpleTemplate.bind({});
PlaygroundRadioGroup.parameters = { chromatic: { disable: true } };
PlaygroundRadioGroup.args = {
  label: 'Gender',
  modelValue: '',
  values: [
    { value: 'male', label: 'Male' },
    { value: 'female', label: 'Female' },
    { value: 'other', label: 'Other' },
  ],
};

// Do: Radio group with clear labels
export const DoWithClearLabels = SimpleTemplate.bind({});
DoWithClearLabels.parameters = { chromatic: { disable: true } };
DoWithClearLabels.args = {
  label: 'Notification preference',
  modelValue: '',
  values: [
    { value: 'email', label: 'Email' },
    { value: 'sms', label: 'SMS' },
    { value: 'push', label: 'Push notifications' },
  ],
};

// Do: Radio group with caption
export const DoWithCaption = SimpleTemplate.bind({});
DoWithCaption.parameters = { chromatic: { disable: true } };
DoWithCaption.args = {
  label: 'Account type',
  modelValue: '',
  captions: ['Select the type of account you want to create'],
  values: [
    { value: 'personal', label: 'Personal' },
    { value: 'business', label: 'Business' },
  ],
};

// Do: Radio group with error feedback
export const DoWithErrorFeedback = SimpleTemplate.bind({});
DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
DoWithErrorFeedback.args = {
  label: 'Gender',
  modelValue: '',
  errors: ['Please select a gender'],
  values: [
    { value: 'male', label: 'Male' },
    { value: 'female', label: 'Female' },
    { value: 'other', label: 'Other' },
  ],
};

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

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

// Don't: No error feedback
export const DontNoErrorFeedback = SimpleTemplate.bind({});
DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
DontNoErrorFeedback.args = {
  label: 'Gender',
  modelValue: '',
  values: [
    { value: 'male', label: 'Male' },
    { value: 'female', label: 'Female' },
  ],
};

// Do: Radio group in column layout
export const DoWithColumnLayout = SimpleTemplate.bind({});
DoWithColumnLayout.parameters = { chromatic: { disable: true } };
DoWithColumnLayout.args = {
  label: 'Notification preference',
  modelValue: '',
  align: 'column',
  captions: ['Choose how you want to receive notifications'],
  values: [
    { value: 'email', label: 'Email notifications' },
    { value: 'sms', label: 'SMS notifications' },
    { value: 'push', label: 'Push notifications' },
    { value: 'none', label: 'No notifications' },
  ],
};
