import UiButton from '@/components/button/UiButton.vue';
import { StatusType } from '@/models/';
import {
  ArrowLeft,
  ArrowRight,
  Camera,
  Heart,
  Wand,
  Citrus,
} from 'lucide-vue-next';
import { vueRouter } from 'storybook-vue3-router';

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

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  tags: ['code-only'],
  title: 'Composants/button/UiButton',
  component: UiButton,
  argTypes: {
    color: {
      control: { type: 'select' },
      options: [
        StatusType.Danger,
        StatusType.Default,
        StatusType.Success,
        StatusType.Warning,
        StatusType.Information,
      ],
    },
    mode: {
      control: { type: 'select' },
      options: ['fill', 'ghost', 'outline'],
    },
    type: {
      control: { type: 'select' },
      options: ['button', 'submit'],
    },
    to: { control: { type: 'text' } },
  },
  decorators: [
    vueRouter([
      {
        name: 'route',
        path: '/ma-route',
      },
    ]),
  ],
};

const Template = (args) => ({
  components: {
    UiButton,
    ArrowRight,
    ArrowLeft,
    Camera,
    Heart,
    Wand,
  },
  setup() {
    return { args };
  },
  template: `
    <UiButton v-bind="args">Save me</UiButton>
    <br>
    <br>
    <UiButton v-bind="args">
      Next page
      <template #end><ArrowRight /></template>
    </UiButton>
    <br>
    <br>
    <UiButton  v-bind="args">
      <template #start>
        <Heart/>
      </template>
      Icons left & right
      <template #end> 
        <Wand/>
      </template>
      </UiButton>
      <br>
      <br>
    <UiButton v-bind="args">
    <template #start><ArrowLeft /></template>
    Retour
    </UiButton>
    <br>
  `,
});

const TemplateIcon = ({ mode }) => ({
  components: {
    UiButton,
    Heart,
    Wand,
    Citrus,
  },
  setup() {
    return { mode };
  },
  template: `
  <div style="display:flex; gap:1rem; margin:1rem 0; flex-wrap: wrap;" v-for="color in ['main', 'danger']">
    <UiButton icon mode="ghost" :color="color">
      <Wand/>
    </UiButton>
    <UiButton icon mode="ghost" :color="color" class="_hover">
      <Heart/>
    </UiButton>
    <UiButton icon mode="ghost" :color="color" disabled>
      <Citrus />
    </UiButton>
    </div>
  `,
});

export const IconButton = TemplateIcon.bind({});
IconButton.args = {};
IconButton.parameters = {
  docs: {
    // 👇 Disable Code panel for this specific story
    codePanel: false,
  },
};

export const IconButtonWithRouterArg = Template.bind({});
IconButtonWithRouterArg.args = { to: { name: 'route' } };
IconButtonWithRouterArg.parameters = {
  docs: {
    // 👇 Disable Code panel for this specific story
    codePanel: false,
  },
};

export const Error = Template.bind({});
Error.args = {
  color: StatusType.Danger,
};
Error.parameters = {
  docs: {
    // 👇 Disable Code panel for this specific story
    codePanel: false,
  },
};

export const PrimaryUI = Template.bind({});
PrimaryUI.args = {};
PrimaryUI.parameters = {
  docs: {
    // 👇 Disable Code panel for this specific story
    codePanel: false,
  },
};

export const SecondaryUI = Template.bind({});
SecondaryUI.args = {
  color: StatusType.Default,
  mode: 'outline',
};
SecondaryUI.parameters = {
  docs: {
    // 👇 Disable Code panel for this specific story
    codePanel: false,
  },
};
