import BmsFloatingWindow from '@/components/layout/BmsFloatingWindow.vue';
import BmsButton from '@/components/button/BmsButton.vue';

export default {
  title: 'Composants/layout/FloatingWindow',
  component: BmsFloatingWindow,
};

const Template = (args) => ({
  components: {
    BmsFloatingWindow,
    BmsButton,
  },
  setup() {
    return { args };
  },
  template: `
    <div style="width: ${args.containerWidth || '1200px'}; height: ${args.containerHeight || '100vh'}; background: purple; position:relative">
      <BmsFloatingWindow v-bind="args">
        <template #action>
          <BmsButton type="secondary"> custom action </BmsButton>
        </template>
        ${args?.content}
      </BmsFloatingWindow>
    </div>
  `,
});

export const Default = Template.bind({});
Default.args = {
  title: 'My title',
  modelValue: true,
};

export const Large = Template.bind({});
Large.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  width: '1200px',
  title: 'My title',
  modelValue: true,
};

export const StartExpanded = Template.bind({});
StartExpanded.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  width: '1200px',
  title: 'My title',
  modelValue: true,
  expanded: true,
  expandable: true,
};

export const StartExpandedWithRetroCompat = Template.bind({});
StartExpandedWithRetroCompat.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  width: '1200px',
  title: 'My title',
  modelValue: true,
  startExpanded: true,
  expandable: true,
};

export const Closed = Template.bind({});
Closed.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  title: 'My title',
  modelValue: false,
};

export const Overflow = Template.bind({});
Overflow.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  title: 'Cyrano de Bergerac',
  modelValue: true,
  content: `Ah ! non ! c’est un peu court, jeune homme !
On pouvait dire… Oh ! Dieu ! … bien des choses en somme…
En variant le ton, – par exemple, tenez :
Agressif : « Moi, monsieur, si j’avais un tel nez,
Il faudrait sur-le-champ que je me l’amputasse ! »
Amical : « Mais il doit tremper dans votre tasse
Pour boire, faites-vous fabriquer un hanap ! »
Descriptif : « C’est un roc ! … c’est un pic ! … c’est un cap !
Que dis-je, c’est un cap ? … C’est une péninsule ! »
Curieux : « De quoi sert cette oblongue capsule ?
D’écritoire, monsieur, ou de boîte à ciseaux ? »
Gracieux : « Aimez-vous à ce point les oiseaux
Que paternellement vous vous préoccupâtes
De tendre ce perchoir à leurs petites pattes ? »
Truculent : « Ça, monsieur, lorsque vous pétunez,
La vapeur du tabac vous sort-elle du nez
Sans qu’un voisin ne crie au feu de cheminée ? »
Prévenant : « Gardez-vous, votre tête entraînée
Par ce poids, de tomber en avant sur le sol ! »
Tendre : « Faites-lui faire un petit parasol
De peur que sa couleur au soleil ne se fane ! »
Pédant : « L’animal seul, monsieur, qu’Aristophane
Appelle Hippocampéléphantocamélos
Dut avoir sous le front tant de chair sur tant d’os ! »
Cavalier : « Quoi, l’ami, ce croc est à la mode ?
Pour pendre son chapeau, c’est vraiment très commode ! »
Emphatique : « Aucun vent ne peut, nez magistral,
T’enrhumer tout entier, excepté le mistral ! »
Dramatique : « C’est la Mer Rouge quand il saigne ! »
Admiratif : « Pour un parfumeur, quelle enseigne ! »
Lyrique : « Est-ce une conque, êtes-vous un triton ? »
Naïf : « Ce monument, quand le visite-t-on ? »
Respectueux : « Souffrez, monsieur, qu’on vous salue,
C’est là ce qui s’appelle avoir pignon sur rue ! »
Campagnard : « Hé, ardé ! C’est-y un nez ? Nanain !
C’est queuqu’navet géant ou ben queuqu’melon nain ! »
Militaire : « Pointez contre cavalerie ! »
Pratique : « Voulez-vous le mettre en loterie ?
Assurément, monsieur, ce sera le gros lot ! »
Enfin parodiant Pyrame en un sanglot :
« Le voilà donc ce nez qui des traits de son maître
A détruit l’harmonie ! Il en rougit, le traître ! »
– Voilà ce qu’à peu près, mon cher, vous m’auriez dit
Si vous aviez un peu de lettres et d’esprit
Mais d’esprit, ô le plus lamentable des êtres,
Vous n’en eûtes jamais un atome, et de lettres
Vous n’avez que les trois qui forment le mot : sot !
Eussiez-vous eu, d'ailleurs, l'invention qu'il faut
Pour pouvoir là, devant ces nobles galeries,
me servir toutes ces folles plaisanteries,
Que vous n'en eussiez pas articulé le quart
De la moitié du commencement d'une, car
Je me les sers moi-même, avec assez de verve,
Mais je ne permets pas qu'un autre me les serve.`,
};

const IframeTemplate = (args) => ({
  components: {
    BmsFloatingWindow,
  },
  setup() {
    return { args };
  },
  template: `
    <div style="width: 100%; height: 100vh; position: relative;">
      <iframe
        src="https://example.com"
        style="width: 100%; height: 100%; border: none;"
      ></iframe>
      <BmsFloatingWindow v-bind="args">
        <p style="padding: 1em;">Essayez de déplacer cette fenêtre au-dessus de l'iframe.</p>
        <p style="padding: 1em;">Le drag and drop fonctionne grâce à l'overlay qui intercepte les événements.</p>
      </BmsFloatingWindow>
    </div>
  `,
});

export const WithIframe = IframeTemplate.bind({});
WithIframe.args = {
  title: 'Drag me over the iframe',
  modelValue: true,
};
WithIframe.parameters = {
  docs: {
    description: {
      story:
        "Démontre le drag and drop fonctionnant au-dessus d'une iframe. L'overlay transparent capture les événements souris même quand la souris passe au-dessus de l'iframe.",
    },
  },
};

export const PlacementTopLeft = Template.bind({});
PlacementTopLeft.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  title: 'Top Left Placement',
  modelValue: true,
  defaultPlacement: 'top-left',
};
PlacementTopLeft.parameters = {
  docs: {
    description: {
      story: 'Fenêtre positionnée par défaut en haut à gauche.',
    },
  },
};

export const PlacementTopRight = Template.bind({});
PlacementTopRight.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  title: 'Top Right Placement',
  modelValue: true,
  defaultPlacement: 'top-right',
};

export const PlacementBottomLeft = Template.bind({});
PlacementBottomLeft.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  title: 'Bottom Left Placement',
  modelValue: true,
  defaultPlacement: 'bottom-left',
};

export const PlacementBottomRight = Template.bind({});
PlacementBottomRight.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  title: 'Bottom Right Placement',
  modelValue: true,
  defaultPlacement: 'bottom-right',
};

export const Expandable = Template.bind({});
Expandable.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  title: 'Fenêtre expandable',
  modelValue: true,
  expandable: true,
  content:
    '<p style="padding: 1em;">Cliquez sur l\'icône maximize pour agrandir la fenêtre au parent.</p>',
};
Expandable.parameters = {
  docs: {
    description: {
      story:
        "Fenêtre avec bouton expand activé. Cliquez sur l'icône pour agrandir/réduire.",
    },
  },
};

export const ExpandableCustomSize = Template.bind({});
ExpandableCustomSize.args = {
  containerWidth: '1200px',
  containerHeight: '100vh',
  title: 'Expand avec dimensions custom',
  modelValue: true,
  expandable: true,
  expandedWidth: '80%',
  expandedHeight: '80%',
  content:
    '<p style="padding: 1em;">Expand avec dimensions personnalisées (80% x 80%).</p>',
};
ExpandableCustomSize.parameters = {
  docs: {
    description: {
      story:
        'Fenêtre expandable avec dimensions personnalisées (expandedWidth et expandedHeight).',
    },
  },
};

const NestedContainersTemplate = (args) => ({
  components: {
    BmsFloatingWindow,
  },
  setup() {
    return { args };
  },
  template: `
    <div id="outer-container"
         style="width: 100%; height: 100vh; background-color: #667eea; padding: 2em; box-sizing: border-box;">
      <p style="color: white; margin: 0 0 1em;">Container externe - id="outer-container"</p>
      <div id="inner-container"
           style="width: 80%; height: 80%; background-color: #f093fb; padding: 2em; box-sizing: border-box; position: relative;">
        <p style="color: white; margin: 0 0 1em;">Container interne - id="inner-container"</p>
        <BmsFloatingWindow v-bind="args">
          <p style="padding: 1em;">Cliquez sur expand pour voir la fenêtre s'agrandir sur le container
            <strong>interne</strong>.</p>
          <p style="padding: 0 1em;">La prop <code>expandTarget="#inner-container"</code> définit la cible.</p>
        </BmsFloatingWindow>
      </div>
    </div>
  `,
});

export const ExpandToInnerTarget = NestedContainersTemplate.bind({});
ExpandToInnerTarget.args = {
  title: 'Expand vers inner container',
  modelValue: true,
  expandable: true,
  expandTarget: '#inner-container',
  defaultPlacement: 'top-left',
};
ExpandToInnerTarget.parameters = {
  docs: {
    description: {
      story:
        "Démontre expandTarget : la fenêtre s'agrandit sur le container interne (rose) plutôt que sur son parent direct.",
    },
  },
};

export const ExpandToOuterTarget = NestedContainersTemplate.bind({});
ExpandToOuterTarget.args = {
  title: 'Expand vers outer container',
  modelValue: true,
  expandable: true,
  expandTarget: '#outer-container',
  defaultPlacement: 'top-left',
};
ExpandToOuterTarget.parameters = {
  docs: {
    description: {
      story:
        "Démontre expandTarget : la fenêtre s'agrandit sur le container externe (violet).",
    },
  },
};

const ForeignContainersTemplate = (args) => ({
  components: {
    BmsFloatingWindow,
  },
  setup() {
    return { args };
  },
  template: `
    <div id="foreign-container" style="width: 80%; height: 80%; background-color: green; padding: 2em; box-sizing: border-box;">
      <p style="color: white; margin: 0 0 1em;">Container interne - id="foreign-container"</p>
    </div>
      <p style="color: white; margin: 0 0 1em;">Container externe - id="outer-container"</p>
      <div id="inner-container" style="width: 80%; height: 80%; background-color: #f093fb; padding: 2em; box-sizing: border-box; ">
        <p style="color: white; margin: 0 0 1em;">Container interne - id="inner-container"</p>
          <BmsFloatingWindow v-bind="args">
            <p style="padding: 1em;">Cliquez sur expand pour voir la fenêtre s'agrandir sur le container <strong>interne</strong>.</p>
            <p style="padding: 0 1em;">La prop <code>expandTarget="#inner-container"</code> définit la cible.</p>
          </BmsFloatingWindow>
    </div>
  `,
});

export const ForeignContainers = ForeignContainersTemplate.bind({});
ForeignContainers.args = {
  title: 'Expand vers outer foreign',
  modelValue: true,
  expandable: true,
  expandTarget: '#foreign-container',
  defaultPlacement: 'top-left',
};
ForeignContainers.parameters = {
  docs: {
    description: {
      story:
        "Démontre expandTarget : la fenêtre s'agrandit sur le container extérieur à son arbre (violet).",
    },
  },
};
