import BmsGhost from './BmsGhost.vue';

export default {
  title: 'Composants/feedback/Ghost',
  component: BmsGhost,
};

const Template = (args) => ({
  components: {
    BmsGhost,
  },
  data() {
    return { args };
  },
  template: `
    <div 
      :style="{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        padding: '1em',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        userSelect: 'none',
        cursor: 'pointer'
      }"
      @pointerdown="args.modelValue = !args.modelValue"
    >
      <p>Cliquez pour faire apparaître/Disparaître le fantôme</p>
    </div>
    <BmsGhost
      v-model="args.modelValue"
      :opacity-when-visible="args.opacityWhenVisible"
    >
      <div
        :style="{
          background: 'darkslategray',
          color: 'white',
          padding: '1em',
          borderRadius: '8px',
        }"
      >
        <h3 :style="{
          margin: 0,
          color: 'white',
        }">Bonjour !</h3>
        <p style="margin: 0">Je suis un fantôme</p>
      </div>
    </BmsGhost>
  `,
});

export const Default = Template.bind({});
Default.args = {
  modelValue: false,
  opacityWhenVisible: 0.6,
};
