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

export default {
  parameters: {
    docs: {
      page: template,
    },
  },
  tags: ['code-only'],
  title: 'Composants/navigation/UiTenantSwitcher',
  component: UiTenantSwitcher,
};

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

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

Default.args = {
  visible: true,
  to: 'div#anchor',
  selectTenantPlaceholder: 'placeholder',
  tenants: [
    {
      id: 'siteId',
      information: 'ouest-france',
      label: 'Ouest France',
    },
  ],
};

export const WithFavoritesSites = Template.bind({});

WithFavoritesSites.args = {
  visible: true,
  to: 'div#anchor',
  selectTenantPlaceholder: 'placeholder',
  tenants: [
    {
      id: 'siteId1',
      information: 'siteinformation1',
      label: 'Mon Site 1 with a super long that should overflow',
    },
    {
      id: 'siteId2',
      information: 'siteinformation2',
      label: 'Mon Site 2',
      isFavorite: true,
    },
    {
      id: 'siteId3',
      information: 'siteinformation3',
      label: 'Mon Site 3',
    },
    {
      id: 'siteId4',
      information: 'siteinformation4',
      label: 'Mon Site 4',
    },
    {
      id: 'siteId5',
      information: 'siteinformation5',
      label: 'Mon Site 5',
      isFavorite: true,
    },
  ],
};
