import BmsHeaderTitle from '@/components/layout/BmsHeaderTitle.vue';
import BmsButton from '@/components/button/BmsButton.vue';
import { Flower } from 'lucide-vue-next';

export default {
  title: 'Composants/layout/HeaderTitle',
  component: BmsHeaderTitle,
};

const Template = (args) => ({
  components: { BmsHeaderTitle, Flower },
  setup() {
    return { args };
  },
  template: `
      <BmsHeaderTitle v-bind="args"/>
    `,
});

export const Default = Template.bind({});
Default.args = {
  title: 'Titre',
};

export const WithLabel = Template.bind({});
WithLabel.args = {
  title: 'Titre',
  label: 'My resource',
};

export const WithHelperLinks = Template.bind({});
WithHelperLinks.args = {
  title: 'WithHelperLinks',
  documentationUrl: '/docs',
  activityUrl: '/docs',
};

const TemplateWithSlots = (args) => ({
  components: { BmsHeaderTitle, Flower, BmsButton },
  setup() {
    return { args };
  },
  template: `
      <BmsHeaderTitle v-bind="args">
        <template #logo>
          <Flower/>
        </template>
        <template #afterTitle>
          <BmsButton type="tertiary"> second action </BmsButton>
        </template>
        <template #actions>
          <BmsButton> Action </BmsButton>
        </template>
        <template #subtitle>
          This is a subtitle
        </template>

      </BmsHeaderTitle>
    `,
});
export const WithAll = TemplateWithSlots.bind({});
WithAll.args = {
  title: 'With all slots',
  label: 'a label',
  documentationUrl: '/docs',
  activityUrl: '/docs',
};

// Simple template for documentation
const SimpleTemplate = (args) => ({
  components: { BmsHeaderTitle, BmsButton, Flower },
  setup() {
    return { args };
  },
  template: `
  <BmsHeaderTitle v-bind="args">
    <template v-if="args.logo" #logo>
      <Flower/>
    </template>
    <template v-if="args.afterTitle" #afterTitle>
      <BmsButton type="tertiary">Secondary action</BmsButton>
    </template>
    <template v-if="args.actions" #actions>
      <span style="display: flex; gap: 8px;">
        <BmsButton v-if="args.secondaryAction && !args.twoPrimary" type="secondary">{{ args.secondaryLabel || 'Secondary' }}</BmsButton>
        <BmsButton :type="args.primaryType || 'primary'">{{ args.primaryLabel || 'Primary action' }}</BmsButton>
        <BmsButton v-if="args.secondaryActionRight" type="secondary">{{ args.secondaryLabel || 'Secondary' }}</BmsButton>
        <BmsButton v-if="args.twoPrimary && args.secondaryAction" :type="args.primaryType || 'primary'">{{ args.secondaryLabel || 'Delete' }}</BmsButton>
      </span>
    </template>
    <template v-if="args.subtitle" #subtitle>
      {{ args.subtitle }}
    </template>
  </BmsHeaderTitle>
  `,
});

// Playground with default values for documentation
export const PlaygroundHeaderTitle = SimpleTemplate.bind({});
PlaygroundHeaderTitle.parameters = { chromatic: { disable: true } };
PlaygroundHeaderTitle.args = {
  title: 'Page Title',
};

// Do: Header title with clear title
export const DoWithClearTitle = SimpleTemplate.bind({});
DoWithClearTitle.parameters = { chromatic: { disable: true } };
DoWithClearTitle.args = {
  title: 'User Settings',
};

// Do: Header title with label
export const DoWithLabel = SimpleTemplate.bind({});
DoWithLabel.parameters = { chromatic: { disable: true } };
DoWithLabel.args = {
  title: 'Edit Profile',
  label: 'User Profile',
};

// Do: Header title with actions
export const DoWithActions = SimpleTemplate.bind({});
DoWithActions.parameters = { chromatic: { disable: true } };
DoWithActions.args = {
  title: 'Dashboard',
  actions: true,
};

// Do: Header title with secondary action
export const DoWithSecondaryAction = SimpleTemplate.bind({});
DoWithSecondaryAction.parameters = { chromatic: { disable: true } };
DoWithSecondaryAction.args = {
  title: 'Edit Document',
  actions: true,
  secondaryAction: true,
  secondaryLabel: 'Import',
  primaryLabel: 'Add',
};

// Do: Header title with subtitle
export const DoWithSubtitle = SimpleTemplate.bind({});
DoWithSubtitle.parameters = { chromatic: { disable: true } };
DoWithSubtitle.args = {
  title: 'Project Overview',
  subtitle: 'Manage your project settings and team members',
};

// Do: Header title with helper links
export const DoWithHelperLinks = SimpleTemplate.bind({});
DoWithHelperLinks.parameters = { chromatic: { disable: true } };
DoWithHelperLinks.args = {
  title: 'Configuration',
  documentationUrl: '/docs/configuration',
  activityUrl: '/activity',
};

// Don't: Missing title
export const DontNoTitle = SimpleTemplate.bind({});
DontNoTitle.parameters = { chromatic: { disable: true } };
DontNoTitle.args = {};

export const DoWithTitle = SimpleTemplate.bind({});
DoWithTitle.parameters = { chromatic: { disable: true } };
DoWithTitle.args = {
  title: 'Page Title',
};

// Don't: Too long title
export const DontLongTitle = SimpleTemplate.bind({});
DontLongTitle.parameters = { chromatic: { disable: true } };
DontLongTitle.args = {
  title:
    'This is a very long page title that should not be used because it makes the header difficult to read and breaks the layout',
};

export const DoShortTitle = SimpleTemplate.bind({});
DoShortTitle.parameters = { chromatic: { disable: true } };
DoShortTitle.args = {
  title: 'Settings',
};

// Don't: Two primary buttons
export const DontTwoPrimaryButtons = SimpleTemplate.bind({});
DontTwoPrimaryButtons.parameters = { chromatic: { disable: true } };
DontTwoPrimaryButtons.args = {
  title: 'Edit Document',
  actions: true,
  twoPrimary: true,
  primaryType: 'primary',
  primaryLabel: 'Add',
  secondaryAction: true,
  secondaryLabel: 'Delete',
};

// Don't: Inverted button order
export const DontInvertedButtonOrder = SimpleTemplate.bind({});
DontInvertedButtonOrder.parameters = { chromatic: { disable: true } };
DontInvertedButtonOrder.args = {
  title: 'Edit Document',
  actions: true,
  secondaryActionRight: true,
  secondaryLabel: 'Import',
  primaryLabel: 'Add',
};
