<template>
  <div class="pixi-renderer">
    <!-- All child <template> elements get added in here -->
    <slot></slot>
  </div>
</template>

<script>
import { Application, settings } from "pixi.js"

export default {
  props: {
    height: {
      type: Number,
      required: false,
      default: 600
    },
    width: {
      type: Number,
      required: false,
      default: 800
    },
    autoResize: {
      type: String,
      required: false,
      default: ""
    },
    backgroundColor: {
      type: Number,
      required: false,
      default: 0
    },
    backgroundAlpha: {
      type: Number,
      required: false,
      default: 1
    },
    clearBeforeRender: {
      type: Boolean,
      required: false,
      default: true
    },
    resolution: {
      type: settings.RESOLUTION,
      required: false,
      default: 0
    },
    roundPixels: {
      type: String,
      required: false,
      default: ""
    },
    autoStart: {
      type: Boolean,
      required: false,
      default: true
    },
    preserveDrawingBuffer: {
      type: Boolean,
      required: false,
      default: false
    },
    useContextAlpha: {
      type: Boolean,
      required: false,
      default: true
    },
    forceCanvas: {
      type: Boolean,
      required: false,
      default: false
    },
    antialias: {
      type: Boolean,
      required: false,
      default: false
    },
    autoDensity: {
      type: Boolean,
      required: false,
      default: false
    },
    transparent: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data() {
    const options = { width: this.width, height: this.height }
    if (this.autoResize) {
      options.autoResize = this.autoResize
    }
    if (this.backgroundColor) {
      options.backgroundColor = this.backgroundColor
    }
    if (this.clearBeforeRender) {
      options.clearBeforeRender = this.clearBeforeRender
    }
    if (this.preserveDrawingBuffer) {
      options.preserveDrawingBuffer = this.preserveDrawingBuffer
    }
    if (this.resolution) {
      options.resolution = this.resolution
    }
    if (this.roundPixels) {
      options.roundPixels = this.roundPixels
    }
    if (this.transparent) {
      options.transparent = this.transparent
    }
    if (this.backgroundAlpha) {
      options.backgroundAlpha = this.backgroundAlpha
    }
    if (this.autoStart) {
      options.autoStart = this.autoStart
    }
    if (this.useContextAlpha) {
      options.useContextAlpha = this.useContextAlpha
    }
    if (this.autoDensity) {
      options.autoDensity = this.autoDensity
    }
    if (this.antialias) {
      options.antialias = this.antialias
    }
    if (this.forceCanvas) {
      options.forceCanvas = this.forceCanvas
    }
    return {
      app: new Application(options),
      pixiObjects: {}
    }
  },
  provide() {
    return {
      app: this.app,
      pixiObjects: this.pixiObjects
    }
  },
  computed: {
    stage() {
      return this.app.stage
    },
    instance() {
      return this.app.stage
    },
    renderer() {
      return this.app.renderer
    }
  },
  watch: {
    autoResize(autoResize) {
      this.renderer.autoResize = autoResize
    },
    backgroundColor(backgroundColor) {
      this.renderer.backgroundColor = backgroundColor
    },
    clearBeforeRender(clearBeforeRender) {
      this.renderer.clearBeforeRender = clearBeforeRender
    },
    preserveDrawingBuffer(preserveDrawingBuffer) {
      this.renderer.preserveDrawingBuffer = preserveDrawingBuffer
    },
    resolution(resolution) {
      this.renderer.resolution = resolution
    },
    roundPixels(roundPixels) {
      this.renderer.roundPixels = roundPixels
    },
    transparent(transparent) {
      this.renderer.transparent = transparent
    },
    height(height) {
      this.renderer.resize(this.width, height)
    },
    width(width) {
      this.renderer.resize(width, this.height)
    }
  },
  mounted() {
    this.$el.appendChild(this.app.view)
    this.app.ticker.add(delta => this.$emit("tick", delta))
  }
}
</script>

<style>
.pixi-renderer {
  display: inline-block;
  line-height: 0;
}

.pixi-renderer div {
  display: none;
}
</style>
