import docs from "./pn-scroll-docs.json";

export default {
  title: 'Components/Animation/Scroll',
  parameters: {
    notes: docs,
    layout: 'fullscreen',
  },
};

const ScrollTemplateFade = args => {
  args.intersectionCallback = customIntersectionCallback;
  args.observerOptions = customObserverOptions;

  return `
  <br>
  <p>Scroll down...</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <pn-scroll><p slot="scroll-affected" style="background:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla sem sed lectus convallis, sit amet posuere dolor imperdiet. Morbi in arcu consectetur, ultricies orci et, dignissim magna. Nulla nec erat sed mi eleifend efficitur. Donec placerat felis vel cursus mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis purus id arcu consequat facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam interdum nulla a odio facilisis sodales. Vivamus finibus vestibulum orci nec rutrum. Aenean in ullamcorper eros, eget hendrerit quam.</p></pn-scroll>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <pn-scroll><p slot="scroll-affected" style="background:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla sem sed lectus convallis, sit amet posuere dolor imperdiet. Morbi in arcu consectetur, ultricies orci et, dignissim magna. Nulla nec erat sed mi eleifend efficitur. Donec placerat felis vel cursus mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis purus id arcu consequat facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam interdum nulla a odio facilisis sodales. Vivamus finibus vestibulum orci nec rutrum. Aenean in ullamcorper eros, eget hendrerit quam.</p></pn-scroll>
    <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <pn-scroll><p slot="scroll-affected">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla sem sed lectus convallis, sit amet posuere dolor imperdiet. Morbi in arcu consectetur, ultricies orci et, dignissim magna. Nulla nec erat sed mi eleifend efficitur. Donec placerat felis vel cursus mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis purus id arcu consequat facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam interdum nulla a odio facilisis sodales. Vivamus finibus vestibulum orci nec rutrum. Aenean in ullamcorper eros, eget hendrerit quam.</p></pn-scroll>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  `;
};

export const ScrollFade = ScrollTemplateFade.bind({});
ScrollFade.args = {
  //intersectionCallback: customIntersectionCallack,
  //observerOptions: customObserverOptions,
};

const customIntersectionCallback = (entries /*:IntersectionObserverEntry[]*/, observer /*:IntersectionObserver*/) => {
  entries.forEach(entry => {
    entry.target.classList.toggle('in-view', entry.isIntersecting);
    //check more here perhaps
  });
};

const customObserverOptions = {
  root: null,
  threshold: 20, //percent visible before "isIntersecting"
};
