import InteractiveWindow from './interactive-window.tsx'

export default {
  title: 'The Design system/Interactive window',
  component: InteractiveWindow,
}

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div style="position: relative;">
        <InteractiveWindow
          initialLeft={100}
          initialTop={100}
          slot={(options) => (
            <div style="max-height: 100%; overflow: scroll; max-width: 100%;">
              <img
                onMousedown={(e) => { e.preventDefault(); options.onMouseDown(e) }}
                src="https://avatars.mds.yandex.net/get-mpic/4497593/img_id6285154275730361133.jpeg/orig"
              />
            </div>
          )}
        />
        <InteractiveWindow
          initialLeft={400}
          initialTop={400}
          slot={(options) => (
            <div style="max-height: 100%; overflow: scroll; max-width: 100%;">
              <img
                onMousedown={(e) => { e.preventDefault(); options.onMouseDown(e) }}
                src="https://avatars.mds.yandex.net/get-mpic/4497593/img_id6285154275730361133.jpeg/orig"
              />
            </div>
          )}
        />
      </div>
    )
  },
})

export const Primary = Template.bind({})