import BmsSplitWindow from './BmsSplitWindow.vue';

export default {
  title: 'Composants/layout/SplitWindow',
  component: BmsSplitWindow,
  argTypes: {
    splitOrientation: {
      control: { type: 'select' },
      options: ['horizontal', 'vertical'],
      defaultValue: 'vertical',
    },
    min: {
      control: {
        type: 'number',
        min: 0,
        max: 100,
      },
      defaultValue: 20,
    },
    max: {
      control: {
        type: 'number',
        min: 0,
        max: 100,
      },
      defaultValue: 80,
    },
    primary: {
      control: { type: 'select' },
      options: ['first', 'second'],
      defaultValue: 'first',
    },
    collapsed: {
      control: { type: 'boolean' },
      defaultValue: false,
    },
    ariaLabel: {
      control: { type: 'text' },
    },
    split: {
      control: {
        type: 'number',
        min: 0,
        max: 100,
      },
    },
  },
};

const Template = (args) => ({
  components: { BmsSplitWindow },
  setup() {
    return { args };
  },
  template: `
    <div style="height: 400px; border: 1px solid #ccc;">
      <BmsSplitWindow 
        v-model="args.split"
        :split-orientation="args.splitOrientation"
        :min="args.min"
        :max="args.max"
        :primary="args.primary"
        :collapsed="args.collapsed"
        :aria-label="args.ariaLabel"
        @update:collapsed="(collapsed) => { args.collapsed = collapsed }"
      >
        <template #first>
          <div style="display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightblue">
            <p>First</p>
          </div>
        </template>
        <template #second>
          <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightpink">
            <p>Second</p>
          </div>
        </template>
      </BmsSplitWindow>
    </div>
  `,
});

export const Default = Template.bind({});
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
Default.args = {
  splitOrientation: 'vertical',
  min: 20,
  max: 80,
  primary: 'first',
  ariaLabel: 'Split window divider',
  split: 50,
  collapsed: false,
};

export const MultiSplit = (args) => ({
  components: { BmsSplitWindow },
  setup() {
    return { args };
  },
  template: `
    <div style="height: 400px; border: 1px solid #ccc;">
      <BmsSplitWindow
        v-model="args.split"
        :split-orientation="'vertical'"
        :min="args.min"
        :max="args.max"
        :primary="'first'"
        :collapsed="args.collapsed"
        :aria-label="args.ariaLabel"
      >
        <template #first>
          <BmsSplitWindow
            v-model="args.split2"
            :split-orientation="'horizontal'"
            :min="args.min"
            :max="args.max"
            :primary="'first'"
            :aria-label="args.ariaLabel"
            style="height: 100%;"
          >
            <template #first>
              <div style="display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightgreen">
                <p>Multi First</p>
              </div>
            </template>
            <template #second>
              <div style="display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightyellow">
                <p>Multi Second</p>
              </div>
            </template>
          </BmsSplitWindow>
        </template>
        <template #second>
          <div style="display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: lightcoral">
            <p>Third Split</p>
          </div>
        </template>
      </BmsSplitWindow>
    </div>
  `,
  data() {
    return {
      split2: 50,
    };
  },
});

MultiSplit.args = {
  splitOrientation: 'vertical',
  split: 30,
  min: 20,
  max: 80,
  primary: 'first',
  collapsed: false,
  ariaLabel: 'Multi split window divider',
};
