import BmsChip from '@/components/form/BmsChip.vue';

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

export default {
  title: 'Composants/form/Chip',
  component: BmsChip,
  argTypes: {
    color: { options: ['grey', 'blue', 'red', 'green', 'orange'] },
  },
  parameters: {
    docs: {
      page: template,
    },
  },
};

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsChip,
  },
  template: `
  <BmsChip v-bind="args">
    Content in a slot
  </BmsChip>
  `,
});

export const Default = Template.bind({});
Default.args = {};

export const Green = Template.bind({});
Green.args = {
  color: 'green',
};

export const Red = Template.bind({});
Red.args = {
  color: 'red',
};

export const Blue = Template.bind({});
Blue.args = {
  color: 'blue',
};

export const Grey = Template.bind({});
Grey.args = {
  color: 'grey',
};

export const Orange = Template.bind({});
Orange.args = {
  color: 'orange',
};

export const Purple = Template.bind({});
Purple.args = {
  color: 'purple',
};

export const Unknown = Template.bind({});
Unknown.args = {
  color: 'Unknown',
};

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

// Playground with default values for documentation
export const PlaygroundChip = SimpleTemplate.bind({});
PlaygroundChip.parameters = { chromatic: { disable: true } };
PlaygroundChip.args = {
  content: 'Status',
  color: 'grey',
};

// Do: Chip with clear content
export const DoWithClearContent = SimpleTemplate.bind({});
DoWithClearContent.parameters = { chromatic: { disable: true } };
DoWithClearContent.args = {
  content: 'Active',
  color: 'green',
};

// Do: Chip with appropriate color
export const DoWithAppropriateColor = SimpleTemplate.bind({});
DoWithAppropriateColor.parameters = { chromatic: { disable: true } };
DoWithAppropriateColor.args = {
  content: 'Error',
  color: 'red',
};

// Do: Chip with short content
export const DoWithShortContent = SimpleTemplate.bind({});
DoWithShortContent.parameters = { chromatic: { disable: true } };
DoWithShortContent.args = {
  content: 'New',
  color: 'blue',
};

// Do: Chip with status color
export const DoWithStatusColor = SimpleTemplate.bind({});
DoWithStatusColor.parameters = { chromatic: { disable: true } };
DoWithStatusColor.args = {
  content: 'Pending',
  color: 'orange',
};

// Don't: Chip with too long content
export const DontLongContent = SimpleTemplate.bind({});
DontLongContent.parameters = { chromatic: { disable: true } };
DontLongContent.args = {
  content:
    'This is a very long chip content that should not be used because it makes the chip difficult to read and breaks the layout',
  color: 'grey',
};

export const DoShortContent = SimpleTemplate.bind({});
DoShortContent.parameters = { chromatic: { disable: true } };
DoShortContent.args = {
  content: 'Status',
  color: 'grey',
};

// Don't: Chip with inappropriate color
export const DontInappropriateColor = SimpleTemplate.bind({});
DontInappropriateColor.parameters = { chromatic: { disable: true } };
DontInappropriateColor.args = {
  content: 'Success',
  color: 'red',
};

export const DoAppropriateColor = SimpleTemplate.bind({});
DoAppropriateColor.parameters = { chromatic: { disable: true } };
DoAppropriateColor.args = {
  content: 'Success',
  color: 'green',
};

// Don't: Chip with empty or unclear content
export const DontEmptyContent = SimpleTemplate.bind({});
DontEmptyContent.parameters = { chromatic: { disable: true } };
DontEmptyContent.args = {
  content: '',
  color: 'grey',
};

export const DoClearContent = SimpleTemplate.bind({});
DoClearContent.parameters = { chromatic: { disable: true } };
DoClearContent.args = {
  content: 'Active',
  color: 'green',
};
