import { makeDragable } from './dragable.js'
import { alignChild } from './context.js'
import { optionsListener, getOptions } from './options.js'

const parent = document.getElementById('parent')
const context = document.getElementById('context')
const container = document.getElementById('container')

makeDragable(parent)

let options = getOptions()

function render() {
  const { alignments, boxSizes, containment } = options
  parent.style.width = boxSizes.parentWidth
  parent.style.height = boxSizes.parentHeight
  context.style.width = boxSizes.contextWidth
  context.style.height = boxSizes.contextHeight
  alignChild(parent, context, container, alignments, containment)
}

optionsListener((newOptions) => {
  options = newOptions
  render()
})

render()
parent.addEventListener('custom-drag', render)