import BmsInputCheckboxGroup from '@/components/form/BmsInputCheckboxGroup.vue';
import BmsInputCheckbox from '@/components/form/BmsInputBooleanCheckbox.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/InputCheckboxGroup',
  component: BmsInputCheckboxGroup,
  parameters: {
    docs: {
      page: template,
    },
  },
};

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

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 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: ['titi', 'tutu'],
  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'],
};

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

// Playground with default values for documentation
export const PlaygroundCheckboxGroup = SimpleTemplate.bind({});
PlaygroundCheckboxGroup.parameters = { chromatic: { disable: true } };
PlaygroundCheckboxGroup.args = {
  label: 'Select interests',
  modelValue: [],
  values: [
    { value: 'sports', label: 'Sports' },
    { value: 'music', label: 'Music' },
    { value: 'travel', label: 'Travel' },
  ],
};

// Do: Checkbox group with clear labels
export const DoWithClearLabels = SimpleTemplate.bind({});
DoWithClearLabels.parameters = { chromatic: { disable: true } };
DoWithClearLabels.args = {
  label: 'Communication preferences',
  modelValue: [],
  values: [
    { value: 'email', label: 'Email' },
    { value: 'sms', label: 'SMS' },
    { value: 'phone', label: 'Phone' },
  ],
};

// Do: Checkbox group with caption
export const DoWithCaption = SimpleTemplate.bind({});
DoWithCaption.parameters = { chromatic: { disable: true } };
DoWithCaption.args = {
  label: 'Select categories',
  modelValue: [],
  captions: ['You can select multiple categories'],
  values: [
    { value: 'tech', label: 'Technology' },
    { value: 'design', label: 'Design' },
    { value: 'business', label: 'Business' },
  ],
};

// Do: Checkbox group in column layout
export const DoWithColumnLayout = SimpleTemplate.bind({});
DoWithColumnLayout.parameters = { chromatic: { disable: true } };
DoWithColumnLayout.args = {
  label: 'Select permissions',
  modelValue: [],
  align: 'column',
  captions: ['Select all permissions you want to grant'],
  values: [
    { value: 'read', label: 'Read access' },
    { value: 'write', label: 'Write access' },
    { value: 'delete', label: 'Delete access' },
    { value: 'admin', label: 'Admin access' },
  ],
};

// Do: Checkbox group with error feedback
export const DoWithErrorFeedback = SimpleTemplate.bind({});
DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
DoWithErrorFeedback.args = {
  label: 'Select interests',
  modelValue: [],
  errors: ['Please select at least one interest'],
  values: [
    { value: 'sports', label: 'Sports' },
    { value: 'music', label: 'Music' },
  ],
};

// 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 options',
  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: 'Select interests',
  modelValue: [],
  values: [
    { value: 'sports', label: 'Sports' },
    { value: 'music', label: 'Music' },
  ],
};
