<script>
import ParticleEffect from './particle-effect'

export default {
  props: {
    text: {
      type: String,
      default: '',
    },
    hidden: {
      type: Boolean,
      default: false,
    },
    animating: {
      type: Boolean,
      default: false,
    },
    buttonStyles: {
      type: Object,
      default: null,
    },
    buttonOptions: {
      type: Object,
      default: null,
    },
  },
  computed: {
    particleEffectProps() {
      const result = {hidden: this.hidden}

      Object.keys(this.buttonOptions).forEach(key => {
        if (key === 'hidden') return

        result[key] = this.buttonOptions[key]
      })

      return result
    },
    nativeButtonStyles() {
      const result = {
        background: '#121019',
        color: '#fff',
        padding: '1.5rem 3rem',
        border: '0',
        borderRadius: '5px',
        cursor: 'pointer',
        fontSize: '1.2em',
      }

      Object.keys(this.buttonStyles).forEach(key => {
        result[key] = this.buttonStyles[key]
      })

      return result
    },
  },
  methods: {
    onAnimationComplete() {
      this.$emit('update:animating', false)
    },
    onToggle() {
      if (this.animating) return

      this.$emit('update:hidden', !this.hidden)
      this.$emit('update:animating', true)
    },
  },
  render(createElement) {
    return createElement(
        ParticleEffect,
        {
          props: this.particleEffectProps,
          on: {
            complete: this.onAnimationComplete,
          },
        },
        [
          createElement(
              'button',
              {
                style: this.nativeButtonStyles,
                on: {
                  click: this.onToggle,
                },
              },
              this.text
          ),
        ]
    )
  },
}
</script>
