import BmsTag from '@/components/form/BmsTag.vue';
import { Activity, Trash, X } from 'lucide-vue-next';

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

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

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsTag,
    Activity,
    Trash,
  },
  template: `
    <BmsTag v-bind="args">
      <template #default>
        <Activity/> message
      </template>
      <template v-if="args.templateIcon" #closeIcon>
        <Trash/>
      </template>
    </BmsTag>
  <br/>
  <BmsTag v-bind="{...args, small:true}">
      <template #default>
        <Activity/> message
      </template>
      <template v-if="args.templateIcon" #closeIcon>
        <Trash/>
      </template>
    </BmsTag>
    `,
});

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

export const Active = Template.bind({});
Active.args = {
  active: true,
};

export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
};

export const DisabledActive = Template.bind({});
DisabledActive.args = {
  disabled: true,
  active: true,
};

export const DifferentIcon = Template.bind({});
DifferentIcon.args = {
  templateIcon: true,
};

export const CantBeDismissed = Template.bind({});
CantBeDismissed.args = {
  canBeDismissed: false,
};

// Simple template for documentation (without small variant)
const SimpleTemplate = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsTag,
    Activity,
    X,
  },
  template: `
  <BmsTag v-bind="args">
    {{ args.content || 'Tag' }}
  </BmsTag>
  `,
});

// Playground with default values for documentation
export const PlaygroundTag = SimpleTemplate.bind({});
PlaygroundTag.parameters = { chromatic: { disable: true } };
PlaygroundTag.args = {
  content: 'Filter',
  active: false,
  canBeDismissed: true,
};

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

// Do: Tag with dismissible option
export const DoWithDismissible = SimpleTemplate.bind({});
DoWithDismissible.parameters = { chromatic: { disable: true } };
DoWithDismissible.args = {
  content: 'Filter',
  active: false,
  canBeDismissed: true,
};

// Do: Tag with active state
export const DoWithActiveState = SimpleTemplate.bind({});
DoWithActiveState.parameters = { chromatic: { disable: true } };
DoWithActiveState.args = {
  content: 'Selected',
  active: true,
  canBeDismissed: true,
};

// Do: Tag with disabled state
export const DoWithDisabledState = SimpleTemplate.bind({});
DoWithDisabledState.parameters = { chromatic: { disable: true } };
DoWithDisabledState.args = {
  content: 'Locked',
  active: false,
  disabled: true,
  canBeDismissed: false,
};

// Do: Tag with short content
export const DoWithShortContent = SimpleTemplate.bind({});
DoWithShortContent.parameters = { chromatic: { disable: true } };
DoWithShortContent.args = {
  content: 'New',
  active: false,
  canBeDismissed: true,
};

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

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

export const DoClearContent = SimpleTemplate.bind({});
DoClearContent.parameters = { chromatic: { disable: true } };
DoClearContent.args = {
  content: 'Filter',
  active: false,
  canBeDismissed: true,
};

// Don't: Tag that cannot be dismissed when it should
export const DontCantDismissWhenNeeded = SimpleTemplate.bind({});
DontCantDismissWhenNeeded.parameters = { chromatic: { disable: true } };
DontCantDismissWhenNeeded.args = {
  content: 'Temporary filter',
  active: false,
  canBeDismissed: false,
};

export const DoCanDismiss = SimpleTemplate.bind({});
DoCanDismiss.parameters = { chromatic: { disable: true } };
DoCanDismiss.args = {
  content: 'Temporary filter',
  active: false,
  canBeDismissed: true,
};
