import BmsTenantSwitcher from '@/components/navigation/BmsTenantSwitcher.vue';

export default {
  title: 'Composants/navigation/TenantSwitcher',
  component: BmsTenantSwitcher,
};

const logoFile =
  'https://cdn.sipaof.fr/sipaui/latest/downloads/cocardes/of.svg';

const Template = () => ({
  components: {
    BmsTenantSwitcher,
  },
  setup() {
    const noTenantArgs = {
      currentTenant: null,
      tenants: [],
      selectTenantLabel: 'Label',
      selectTenantPlaceholder: 'Placeholder',
    };
    const singleTenantArgs = {
      currentTenant: { id: 'id', label: 'Tenant label', logoFile },
      tenants: [{ id: 'id', label: 'Tenant label' }],
      selectTenantLabel: 'Label',
      selectTenantPlaceholder: 'Placeholder',
    };
    const noCurrentTenantArgs = {
      currentTenant: null,
      tenants: [{ id: 'id1', label: 'Tenant1 label1', initials: 'TL' }],
      selectTenantLabel: 'Label',
      selectTenantPlaceholder: 'Placeholder',
    };
    const multipleTenantsArgs = {
      currentTenant: { id: 'id', label: 'Tenant label', logoFile },
      tenants: [
        {
          id: 'id',
          label: 'Tenant label with a super long name that overflows',
          logoFile,
        },
        { id: 'id1', label: 'Tenant1 label1', initials: 'TL' },
      ],
      selectTenantLabel: 'Label',
      selectTenantPlaceholder: 'Placeholder',
    };
    const withFavoriteTenantsArgs = {
      currentTenant: {
        id: 'id',
        label: 'Tenant label',
      },
      tenants: [
        {
          id: 'id',
          label: 'Tenant label',
          isFavorite: true,
        },
        { id: 'id1', label: 'Tenant1 label1', logoFile },
        { id: 'id2', label: 'Tenant2 label2' },
      ],
      selectTenantLabel: 'Label',
      selectTenantPlaceholder: 'Placeholder',
    };
    return {
      noTenantArgs,
      singleTenantArgs,
      noCurrentTenantArgs,
      multipleTenantsArgs,
      withFavoriteTenantsArgs,
    };
  },
  template: `
  <div style="display:flex;flex-direction:column;gap:2em">
    <strong>No tenant :</strong>
    <BmsTenantSwitcher v-bind="noTenantArgs" />
    <strong>Single tenant available :</strong>
    <BmsTenantSwitcher v-bind="singleTenantArgs" />
    <strong>No current tenant :</strong>
    <BmsTenantSwitcher v-bind="noCurrentTenantArgs" />
    <strong>Multiple tenants available :</strong>
    <BmsTenantSwitcher v-bind="multipleTenantsArgs" />
    <strong>Favorites tenants available :</strong>
    <BmsTenantSwitcher v-bind="withFavoriteTenantsArgs" />
  </div>
      `,
});

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