import docs from './pn-media-block-docs.json';

export default {
  title: 'Components/Media/Media Block',
  parameters: {
    notes: docs,
  },
  argTypes: {
    blockHeight: {
      options: ['100svh', '65svh', 'dynamic'],
      control: { type: 'select' },
    },
    imageSrc: { type: 'string' },
    imageSrcSmallScreenFormat: { type: 'string' },
    imageAltText: { type: 'string' },
    videoSrc: { type: 'string' },
    showOverlayLayer: { type: 'boolean' },
    customOverlayBackground: { type: 'string' },
    animateOverlayBackground: { type: 'boolean' },
    fixedBackground: { type: 'boolean' },
    scrollSnapBlock: { type: 'boolean' },
    blockHeading: { type: 'string' },
    blockHeadingLevel: {
      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
      control: { type: 'select' },
    },
    blockPreamble: { control: 'text', type: 'string' },
    blockLinkText: { type: 'string' },
    blockLinkUrl: { type: 'string' },
  },
};

const Template = ({ ...args }) => {
  return `
    <br>
      <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
    <br>
    <pn-media-block block-height="${args.blockHeight}"
      image-src="${args.imageSrc}"
      image-src-small-screen-format="${args.imageSrcSmallScreenFormat}"
      image-alt-text="${args.imageAltText}"
      show-overlay-layer="${args.showOverlayLayer}"
      custom-overlay-background="${args.customOverlayBackground}"
      animate-overlay-background="${args.animateOverlayBackground}"
      scroll-snap-block="${args.scrollSnapBlock}"
      fixed-background="${args.fixedBackground}"
      margin-bottom="${args.marginBottom}"
      block-heading="${args.blockHeading}"
      block-heading-level="${args.blockHeadingLevel}"
      block-preamble="${args.blockPreamble}">
    </pn-media-block>
    <br>
    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
    <br>
  `;
};

export const Default = Template.bind({});
Default.args = {
  blockHeight: '100svh',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  showOverlayLayer: true,
  scrollSnapBlock: false,
  fixedBackground: false,
  marginBottom: false,
  blockHeadingLevel: 'h2',
  blockHeading: 'Maximize your e-commerce potential',
  blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
};

export const FixedBackground = Template.bind({});
FixedBackground.args = {
  blockHeight: '100svh',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  showOverlayLayer: true,
  scrollSnapBlock: false,
  fixedBackground: true,
  blockHeading: 'Maximize your e-commerce potential',
  blockHeadingLevel: 'h2',
  blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
};

export const CompactHeightBlock = Template.bind({});
CompactHeightBlock.args = {
  blockHeight: '65svh',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  showOverlayLayer: true,
  scrollSnapBlock: false,
  fixedBackground: true,
  blockHeading: 'Maximize your e-commerce potential',
  blockHeadingLevel: 'h2',
  blockPreamble: 'Enhance your customers shopping journey.',
};

export const DynamicHeight = Template.bind({});
DynamicHeight.args = {
  blockHeight: 'dynamic',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  showOverlayLayer: true,
  scrollSnapBlock: false,
  fixedBackground: false,
  blockHeading: 'Maximize your e-commerce potential and go Beyond your limits  and go Beyond your limits  and go Beyond your limits',
  blockHeadingLevel: 'h2',
  blockPreamble:
    'Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase.Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase. Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase.Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase.',
};

export const MultipleSrc = Template.bind({});
MultipleSrc.args = {
  blockHeight: '100svh',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  imageSrcSmallScreenFormat: 'https://picsum.photos/1200/1200',
  imageAltText: 'This is an image',
  showOverlayLayer: true,
  scrollSnapBlock: false,
  fixedBackground: false,
  blockHeading: 'Maximize your e-commerce potential',
  blockHeadingLevel: 'h2',
  blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
};

export const ParallaxBackground = Template.bind({});
ParallaxBackground.args = {
  blockHeight: '100svh',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  showOverlayLayer: true,
  scrollSnapBlock: false,
  fixedBackground: false,
  blockHeading: 'Maximize your e-commerce potential',
  blockHeadingLevel: 'h2',
  blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
};

export const ScrollSnap = Template.bind({});
ScrollSnap.args = {
  blockHeight: '100svh',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  showOverlayLayer: true,
  scrollSnapBlock: true,
  fixedBackground: false,
  blockHeading: 'Maximize your e-commerce potential',
  blockHeadingLevel: 'h2',
  blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
};

export const CustomOverlayBackground = Template.bind({});
CustomOverlayBackground.args = {
  blockHeight: '100svh',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  showOverlayLayer: true,
  customOverlayBackground: 'linear-gradient(180deg, #0d234b, transparent)',
  scrollSnapBlock: true,
  fixedBackground: true,
  blockHeading: 'Maximize your e-commerce potential',
  blockHeadingLevel: 'h2',
  blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
};

export const AnimateOverlayBackground = Template.bind({});
AnimateOverlayBackground.args = {
  blockHeight: '100svh',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  showOverlayLayer: true,
  customOverlayBackground: 'linear-gradient(90deg, rgba(131,58,180,0.8253676470588236) 0%, rgba(253,29,29,0.1783088235294118) 50%, rgba(252,176,69,0.727328431372549) 100%)',
  animateOverlayBackground: true,
  scrollSnapBlock: true,
  fixedBackground: true,
  blockHeading: 'Maximize your e-commerce potential',
  blockHeadingLevel: 'h2',
  blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
};

const TemplateWithLink = ({ ...args }) => {
  return `
    <br>
    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
    <br>
    <pn-media-block
      block-height="${args.blockHeight}"
      image-src="${args.imageSrc}"
      show-overlay-layer="${args.showOverlayLayer}"
      scroll-snap-block="${args.scrollSnapBlock}"
      fixed-background="${args.fixedBackground}"
      block-heading="${args.blockHeading}"
      block-heading-level="${args.blockHeadingLevel}"
      block-preamble="${args.blockPreamble}">
      <div slot="cta-button">
        <pn-button
          appearance="light"
          icon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M19.707 11.293a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.586 13H8a1 1 0 1 1 0-2h8.586l-4.293-4.293a1 1 0 0 1 1.414-1.414l6 6ZM5.01 13H5a1 1 0 1 1 0-2h.01a1 1 0 1 1 0 2Z" clip-rule="evenodd"/></svg>'
          type="button"
          class="cta-block__button " href=${args.blockLinkUrl}>${args.blockLinkText}</pn-button>
      </div>
    </pn-media-block>
    <br>
    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
    <br>
  `;
};

export const WithLink = TemplateWithLink.bind({});
WithLink.args = {
  blockHeight: '100svh',
  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
  fixedBackground: true,
  showOverlayLayer: true,
  blockHeading: 'Maximize your e-commerce potential',
  blockHeadingLevel: 'h2',
  blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
  blockLinkText: 'Request a quote',
  blockLinkUrl: '#google',
};

const TemplateVideo = ({ ...args }) => {
  return `
    <br>
    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
    <br>
    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
    <br>
    <pn-media-block block-height="${args.blockHeight}"
      video-src="${args.videoSrc}"
      show-overlay-layer="${args.showOverlayLayer}"
      scroll-snap-block="${args.scrollSnapBlock}"
      fixed-background="${args.fixedBackground}"
      block-heading="${args.blockHeading}"
      block-heading-level="${args.blockHeadingLevel}"
      block-preamble="${args.blockPreamble}">
    </pn-media-block>
    <br>
    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
    <br>
    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
    <br>
  `;
};

export const Video = TemplateVideo.bind({});
Video.args = {
  blockHeight: '100svh',
  videoSrc: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
  fixedBackground: false,
  showOverlayLayer: true,
  blockHeading: 'Maximize your e-commerce potential',
  blockHeadingLevel: 'h2',
  blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
};
