import { ref } from 'vue';
import BmsSlidingPanelShell from './BmsSlidingPanelShell.vue';
import BmsButton from '../button/BmsButton.vue';

export default {
  title: 'Composants/layout/SlidingPanelShell',
  component: BmsSlidingPanelShell,
};

const Template = (args) => ({
  components: { BmsSlidingPanelShell, BmsButton },
  setup() {
    const showFloatingPanel = ref(args.showFloatingPanel ?? false);
    const collapsed = ref(args.collapsed ?? false);
    return { args, showFloatingPanel, collapsed };
  },
  template: `
    <div style="display: flex; height: 500px; background: var(--bms-background-color, #f5f5f5);">
      <BmsSlidingPanelShell
        v-bind="args"
        :show-floating-panel="showFloatingPanel"
        :collapsed="collapsed"
      >
        <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px;">
          <BmsButton @click="showFloatingPanel = !showFloatingPanel">
            {{ showFloatingPanel ? 'Fermer le tiroir' : 'Ouvrir le tiroir' }}
          </BmsButton>
          <BmsButton type="secondary" @click="collapsed = !collapsed">
            {{ collapsed ? 'Déplier' : 'Replier' }}
          </BmsButton>
        </div>

        <template #floating>
          <div style="padding: 16px;">
            <h3 style="margin-top: 0;">Panneau flottant</h3>
            <p>Contenu du tiroir glissant.</p>
          </div>
        </template>
      </BmsSlidingPanelShell>
      <div style="flex: 1; padding: 16px;">Contenu principal</div>
    </div>
  `,
});

export const Default = Template.bind({});
Default.args = {
  align: 'left',
  showFloatingPanel: false,
};

export const WithDrawerOpen = Template.bind({});
WithDrawerOpen.args = {
  align: 'left',
  showFloatingPanel: true,
};

export const RightAlign = Template.bind({});
RightAlign.args = {
  align: 'right',
  showFloatingPanel: true,
};

export const PushMode = Template.bind({});
PushMode.args = {
  align: 'left',
  mode: 'push',
  showFloatingPanel: false,
};

export const PushModeOpen = Template.bind({});
PushModeOpen.args = {
  align: 'left',
  mode: 'push',
  showFloatingPanel: true,
};

export const PushModeRight = Template.bind({});
PushModeRight.args = {
  align: 'right',
  mode: 'push',
  showFloatingPanel: true,
};
