import BmsInputCheckboxCaptionGroup from '@/components/form/BmsInputCheckboxCaptionGroup.vue';
import BmsInputCheckboxCaption from '@/components/form/BmsInputCheckboxCaption.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/InputCheckboxCaptionGroup',
  component: BmsInputCheckboxCaptionGroup,
  parameters: {
    docs: {
      page: template,
    },
  },
  tags: ['with_useable_code'],
};

const Template = (args) => ({
  setup() {
    const modelValue = ref(args.modelValue);
    return { args, modelValue };
  },
  components: {
    BmsInputCheckboxCaptionGroup,
    BmsInputCheckboxCaption,
  },
  template: `
      <BmsInputCheckboxCaptionGroup v-bind="args" v-model="modelValue"/>
      Mes valeurs cochées sont : {{modelValue}}
    `,
});

const DEFAULT_CHECKBOXCAPTION_INPUT = {
  options: [],
  required: false,
  optional: false,
  disabled: false,
  helperText: 'help me !',
  captions: [],
  errors: [],
  align: 'right',
};

export const DefaultRow = Template.bind({});
DefaultRow.args = {
  ...DEFAULT_CHECKBOXCAPTION_INPUT,
  label: 'This is a field label',
  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: [],
};

export const DefaultColumn = Template.bind({});
DefaultColumn.args = {
  ...DEFAULT_CHECKBOXCAPTION_INPUT,
  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 = {
  ...DEFAULT_CHECKBOXCAPTION_INPUT,
  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 = {
  ...DEFAULT_CHECKBOXCAPTION_INPUT,
  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: ['tata', 'toto'],
  label: 'This is a field label',
};

export const FullHelp = Template.bind({});
FullHelp.args = {
  ...DEFAULT_CHECKBOXCAPTION_INPUT,
  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 = {
  ...DEFAULT_CHECKBOXCAPTION_INPUT,
  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 = {
  ...DEFAULT_CHECKBOXCAPTION_INPUT,
  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 = {
  ...DEFAULT_CHECKBOXCAPTION_INPUT,
  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'],
};

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

// Playground with default values for documentation
export const PlaygroundCheckboxCaptionGroup = SimpleTemplate.bind({});
PlaygroundCheckboxCaptionGroup.parameters = { chromatic: { disable: true } };
PlaygroundCheckboxCaptionGroup.args = {
  label: 'Select features',
  modelValue: [],
  options: [
    {
      value: 'feature1',
      label: 'Feature 1',
      captions: ['Basic feature included'],
    },
    { value: 'feature2', label: 'Feature 2', captions: ['Advanced feature'] },
    { value: 'feature3', label: 'Feature 3', captions: ['Premium feature'] },
  ],
};

// Do: Checkbox caption group with clear labels
export const DoWithClearLabels = SimpleTemplate.bind({});
DoWithClearLabels.parameters = { chromatic: { disable: true } };
DoWithClearLabels.args = {
  label: 'Notification preferences',
  modelValue: [],
  options: [
    {
      value: 'email',
      label: 'Email notifications',
      captions: ['Receive updates via email'],
    },
    {
      value: 'sms',
      label: 'SMS notifications',
      captions: ['Receive updates via SMS'],
    },
    {
      value: 'push',
      label: 'Push notifications',
      captions: ['Receive browser notifications'],
    },
  ],
};

// Do: Checkbox caption group with helpful captions
export const DoWithHelpfulCaptions = SimpleTemplate.bind({});
DoWithHelpfulCaptions.parameters = { chromatic: { disable: true } };
DoWithHelpfulCaptions.args = {
  label: 'Subscription add-ons',
  modelValue: [],
  options: [
    {
      value: 'storage',
      label: 'Extra Storage',
      captions: ['+100GB storage space'],
    },
    {
      value: 'support',
      label: 'Priority Support',
      captions: ['24/7 priority support'],
    },
    {
      value: 'analytics',
      label: 'Advanced Analytics',
      captions: ['Detailed usage analytics'],
    },
  ],
};

// Do: Checkbox caption group in column layout
export const DoWithColumnLayout = SimpleTemplate.bind({});
DoWithColumnLayout.parameters = { chromatic: { disable: true } };
DoWithColumnLayout.args = {
  label: 'Select services',
  modelValue: [],
  align: 'column',
  options: [
    {
      value: 'service1',
      label: 'Service 1',
      captions: ['Description of service 1 with more details'],
    },
    {
      value: 'service2',
      label: 'Service 2',
      captions: ['Description of service 2 with more details'],
    },
    {
      value: 'service3',
      label: 'Service 3',
      captions: ['Description of service 3 with more details'],
    },
  ],
};

// Do: Checkbox caption group with error feedback
export const DoWithErrorFeedback = SimpleTemplate.bind({});
DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
DoWithErrorFeedback.args = {
  label: 'Select features',
  modelValue: [],
  errors: ['Please select at least one feature'],
  options: [
    { value: 'feature1', label: 'Feature 1', captions: ['Basic feature'] },
    { value: 'feature2', label: 'Feature 2', captions: ['Advanced feature'] },
  ],
};

// 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 options',
  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 add-ons',
  modelValue: [],
  options: [
    { value: 'storage', label: 'Extra Storage' },
    { value: 'support', label: 'Priority Support' },
    { value: 'analytics', label: 'Advanced Analytics' },
  ],
};
