import BmsButton from '@/components/button/BmsButton.vue';
import {
  ArrowLeft,
  ArrowRight,
  Camera,
  Heart,
  Wand,
  Check,
} from 'lucide-vue-next';
import { StatusType } from '@/models';

export default {
  title: 'Composants/button/Button',
  component: BmsButton,
  tags: ['with_useable_code'],
  parameters: {
    chromatic: { disable: true },
  },
  argTypes: {
    defaultSlot: {
      description: 'Slot VueJS',
    },
    type: {
      control: { type: 'select' },
      options: ['primary', 'secondary', 'tertiary'],
    },
    mode: {
      control: { type: 'select' },
      options: [StatusType.Default, StatusType.Danger],
    },
    submit: {
      control: { type: 'boolean' },
    },
    to: { control: { type: 'text' } },
  },
};

const Template = (args) => ({
  components: {
    BmsButton,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsButton v-bind="args">
      {{args.defaultSlot ?? 'Save'}}
    </BmsButton>
      `,
});

export const Playground = Template.bind({});
Playground.parameters = { chromatic: { disable: false } };
Playground.args = {
  type: 'primary',
};

export const PlaygroundSecondary = Template.bind({});
PlaygroundSecondary.args = {
  type: 'secondary',
  defaultSlot: 'Cancel',
};

// Stories for documentation examples (Do/Don't)
export const DoSimple = Template.bind({});
DoSimple.args = {
  type: 'primary',
};
export const DoDanger = Template.bind({});
DoDanger.args = {
  mode: 'danger',
};

export const DoSmall = Template.bind({});
DoSmall.args = {
  small: true,
};

// Do: Button with icon at start
export const DoIconStart = () => ({
  components: { BmsButton, Check },
  template: `
    <BmsButton type="primary">
      <template #start><Check /></template>
      Confirm
    </BmsButton>
      `,
});

// Do: Button with icon at end
export const DoIconEnd = () => ({
  components: { BmsButton, ArrowRight },
  template: `
    <BmsButton type="primary">
      Next
      <template #end><ArrowRight /></template>
    </BmsButton>
  `,
});

// Do: Submit button
export const DoSubmit = () => ({
  components: { BmsButton },
  template: `
    <form>
      <BmsButton type="primary" :submit="true">Submit form</BmsButton>
    </form>
  `,
});

// Don't: Long labels
export const DontLongLabel = () => ({
  components: { BmsButton },
  template:
    '<BmsButton type="primary">Click here to save your changes to the document</BmsButton>',
});

export const DoShortLabel = () => ({
  components: { BmsButton },
  template: '<BmsButton type="primary">Save changes</BmsButton>',
});

// Don't: Multiple primary buttons
export const DontMultiplePrimary = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="primary">Save</BmsButton>
      <BmsButton type="primary">Cancel</BmsButton>
      <BmsButton type="primary">Delete</BmsButton>
    </div>
  `,
});

export const DoOnePrimary = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="secondary">Cancel</BmsButton>
      <BmsButton type="secondary">Delete</BmsButton>
      <BmsButton type="primary">Save</BmsButton>
    </div>
  `,
});

// Don't: Too many icons
export const DontTooManyIcons = () => ({
  components: { BmsButton, Heart, Wand, Check, ArrowRight },
  template: `
    <BmsButton type="primary">
      <template #start><Heart /><Wand /></template>
      Save changes
      <template #end><Check /><ArrowRight /></template>
    </BmsButton>
  `,
});

export const DoOneIcon = () => ({
  components: { BmsButton, ArrowRight },
  template: `
    <BmsButton type="primary">
      <template #end><ArrowRight /></template>
      Next
    </BmsButton>
  `,
});

// Don't: Generic labels
export const DontGenericLabel = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="primary">Click here</BmsButton>
      <BmsButton type="primary">Submit</BmsButton>
    </div>
  `,
});

export const DoSpecificLabel = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="primary">Save changes</BmsButton>
      <BmsButton type="primary">Confirm order</BmsButton>
    </div>
  `,
});

// Don't: Primary for cancel
export const DontPrimaryForCancel = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="primary">Cancel</BmsButton>
      <BmsButton type="secondary">Save</BmsButton>
    </div>
  `,
});

export const DoPrimaryForSave = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="secondary">Cancel</BmsButton>
      <BmsButton type="primary">Save</BmsButton>
    </div>
  `,
});

// Secondary button stories for documentation
export const DoSimpleSecondary = Template.bind({});
DoSimpleSecondary.args = {
  type: 'secondary',
  defaultSlot: 'Cancel',
};

export const DoDangerSecondary = Template.bind({});
DoDangerSecondary.args = {
  type: 'secondary',
  mode: 'danger',
};

export const DoSmallSecondary = Template.bind({});
DoSmallSecondary.args = {
  type: 'secondary',
  small: true,
};

// Do: Secondary button with icon at start
export const DoIconStartSecondary = () => ({
  components: { BmsButton, ArrowLeft },
  template: `
    <BmsButton type="secondary">
      <template #start><ArrowLeft /></template>
      Back
    </BmsButton>
      `,
});

// Do: Secondary button with icon at end
export const DoIconEndSecondary = () => ({
  components: { BmsButton, ArrowRight },
  template: `
    <BmsButton type="secondary">
      Next
      <template #end><ArrowRight /></template>
    </BmsButton>
  `,
});

// Do: Secondary submit button
export const DoSubmitSecondary = () => ({
  components: { BmsButton },
  template: `
    <form>
      <BmsButton type="secondary" :submit="true">Cancel form</BmsButton>
    </form>
  `,
});

// Don't: Long labels for secondary
export const DontLongLabelSecondary = () => ({
  components: { BmsButton },
  template:
    '<BmsButton type="secondary">Click here to cancel your changes to the document</BmsButton>',
});

export const DoShortLabelSecondary = () => ({
  components: { BmsButton },
  template: '<BmsButton type="secondary">Cancel changes</BmsButton>',
});

// Don't: Secondary as primary action
export const DontSecondaryAsPrimary = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="secondary">Save</BmsButton>
      <BmsButton type="secondary">Confirm</BmsButton>
    </div>
  `,
});

export const DoSecondaryForCancel = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="secondary">Cancel</BmsButton>
      <BmsButton type="primary">Save</BmsButton>
    </div>
  `,
});

// Don't: Too many icons on secondary
export const DontTooManyIconsSecondary = () => ({
  components: { BmsButton, Heart, Wand, Check, ArrowLeft },
  template: `
    <BmsButton type="secondary">
      <template #start><Heart /><Wand /></template>
      Cancel changes
      <template #end><Check /><ArrowLeft /></template>
    </BmsButton>
  `,
});

export const DoOneIconSecondary = () => ({
  components: { BmsButton, ArrowLeft },
  template: `
    <BmsButton type="secondary">
      <template #start><ArrowLeft /></template>
      Back
    </BmsButton>
  `,
});

// Don't: Generic labels for secondary
export const DontGenericLabelSecondary = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="secondary">Click here</BmsButton>
      <BmsButton type="secondary">Button</BmsButton>
    </div>
  `,
});

export const DoSpecificLabelSecondary = () => ({
  components: { BmsButton },
  template: `
    <div style="display: flex; gap: 8px;">
      <BmsButton type="secondary">Cancel order</BmsButton>
      <BmsButton type="secondary">Go back</BmsButton>
    </div>
  `,
});
