import BmsContentPageLayout from '../components/layout/BmsContentPageLayout.vue';
import BmsHeaderTitle from '../components/layout/BmsHeaderTitle.vue';
import BmsTable from '../components/table/BmsTable.vue';
import BmsBreadcrumb from '../components/navigation/BmsBreadcrumb.vue';
import BmsButton from '../components/button/BmsButton.vue';
import BmsShortLinkMenu from '../components/navigation/BmsShortLinkMenu.vue';

export default {
  components: { BmsShortLinkMenu, BmsButton, BmsBreadcrumb, BmsTable },
  title: 'Pages/List',
  component: BmsContentPageLayout,
  argTypes: {},
};

const Template = (args) => ({
  components: {
    BmsContentPageLayout,
    BmsHeaderTitle,
    BmsBreadcrumb,
    BmsTable,
    BmsButton,
    BmsShortLinkMenu,
  },
  setup() {
    return { args };
  },
  template: `
      <BmsContentPageLayout>
        <template #header>
          <BmsHeaderTitle title="Le Titre de la page" activity-url="/auditMe" documentation-url="/helpme">
            <template #subtitle>Un complement à mon titre ?</template>
            
          </BmsHeaderTitle>
        </template>
        <template #breadcrumb>
          <BmsBreadcrumb :breadcrumbs="args.breadcrumb"/>
        </template>
        <template #default>

          <BmsTable :headers="args.headers" :items="args.items">
            <template #alert-action>
              <BmsButton :mode="StatusType.Danger">Supprimer</BmsButton>
            </template>
            <template #custom-actions>
              <BmsButton>Action 1</BmsButton>
              <BmsButton>Action 2</BmsButton>
            </template>
            <template #default="{ row }">
            </template>
          </BmsTable>
        </template>
      </BmsContentPageLayout>
    `,
});

export const Default = Template.bind({});
Default.args = {
  headers: [
    {
      label: 'Column 1',
      key: 'col1',
      align: 'start',
    },
    {
      label: 'Column 2',
      key: 'col2',
      align: 'center',
    },
    {
      label: 'Column 3',
      key: 'col3',
      align: 'end',
    },
  ],
  items: [
    {
      col1: 'Value1',
      col2: 'Value2',
      col3: 'Value3',
    },
    {
      col1: 'Value2',
      col2: 'Value2',
      col3: 'Value3',
    },
  ],
  breadcrumb: [{ label: 'form', to: '/exposed' }, { label: 'list' }],
};
