import React, { CSSProperties, useEffect, useState } from 'react';
import { Zoom } from './Zoom';

export default {
  component: Zoom,
  title: 'Basics/Zoom',
  argTypes: {
    scale: {
      control: { type: 'range', min: 0.2, max: 30, step: 0.02 },
    },
  },
  parameters: {
    chromatic: { delay: 500, diffThreshold: 0.2 },
  },
};
const EXAMPLE_ELEMENT = (
  <div
    style={{
      width: 2000,
      height: 2000,
      border: '10px solid orangered',
      background: `url('data:image/png;base64,[encoded data, 4476 characters]')`,
    }}
  />
);

const TemplateElement = (args) => <Zoom.Element {...args} />;

export const ElementActualSize = TemplateElement.bind({});

ElementActualSize.args = {
  scale: 1,
  children: EXAMPLE_ELEMENT,
};

export const ElementZoomedIn = TemplateElement.bind({});

ElementZoomedIn.args = {
  scale: 0.7,
  children: EXAMPLE_ELEMENT,
};

export const ElementZoomedOut = TemplateElement.bind({});

ElementZoomedOut.args = {
  scale: 3,
  children: EXAMPLE_ELEMENT,
};

const style: CSSProperties = {
  width: '500px',
  height: '500px',
  border: '2px solid hotpink',
  position: 'relative',
};

const TemplateIFrame = (args) => {
  const iFrameRef = React.useRef<HTMLIFrameElement>(null);
  const [scale, setScale] = useState(1);
  const [loaded, hasLoaded] = useState(false);

  useEffect(() => {
    if (loaded) {
      setScale(args.scale);
    }
  }, [args.scale, loaded]);
  return (
    <Zoom.IFrame iFrameRef={iFrameRef} scale={scale} active={args.active}>
      <iframe
        id="iframe"
        title="UI Panel"
        onLoad={() => hasLoaded(true)}
        src="/iframe.html?id=ui-panel--default&viewMode=story"
        style={style}
        ref={iFrameRef}
        allowFullScreen
      />
    </Zoom.IFrame>
  );
};
export const IFrameActualSize = TemplateIFrame.bind({});

IFrameActualSize.args = {
  scale: 1,
  active: true,
};

// The iFrame stories are disabled because useGlobals works in practice
// but, for some reason breaks in the stories for Zoom.iFrame
IFrameActualSize.parameters = {
  chromatic: { disableSnapshot: true },
};

export const IFrameZoomedIn = TemplateIFrame.bind({});

IFrameZoomedIn.args = {
  scale: 0.7,
  active: true,
};

IFrameZoomedIn.parameters = {
  chromatic: { disableSnapshot: true },
};

export const IFrameZoomedOut = TemplateIFrame.bind({});

IFrameZoomedOut.args = {
  scale: 3,
  active: true,
};

IFrameZoomedOut.parameters = {
  chromatic: { disableSnapshot: true },
};
