<template>
    <div v-on:keyup.esc.exact="sendToggle" ref="screen" class="screen">
      <button 
        :class="fullscreenIcon" 
        v-if="current !== 'disabled'" 
        @click="sendToggle" >
      </button>
      <slot />
      <small class="credits">
        Font generated by flaticon.com. Under <a href="http://creativecommons.org/licenses/by/3.0/">CC</a>: <a data-file="002-minimize" href="https://www.flaticon.com/authors/smartline">Smartline</a>
      </small>
    </div>
</template>

<script>
import {
    service,
    TRANSITION_KEYS as SCREEN_SEND_KEYS
} from './machine/screen';

export default {
  name: 'Screen',
  props: {},
  created() {
    const enabled = typeof document !== 'undefined' && document.fullscreenEnabled;
    this.send(enabled ? SCREEN_SEND_KEYS.ENABLED : SCREEN_SEND_KEYS.DISABLED);
  },
  data: () => ({
    service,
    current: service.machine.current,
    context: service.machine.context
  }),
  methods: {
    send: function(t) {
        this.service.send(t)
        this.current = this.service.machine.current;
        this.context = this.service.machine.context;
    },
    sendToggle: function(e) {
      console.log(e)
      this.send(SCREEN_SEND_KEYS.TOGGLE)
      switch(this.current) {
          case 'fullscreen':
            this.$refs.screen.requestFullscreen()
            break;
          case 'normal':
            document.exitFullscreen();                
      }
    }
  },
  computed: {
    fullscreenIcon: function() {
      return this.current === 'normal' ? 'flaticon-full-screen' : 'flaticon-minimize';
    }
  }
}

</script>

<style lang="scss" scoped>
@import url('../assets/fonts/flaticon.css');

$primary: #8F3985;
$secondary: #a675a1;

.screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  > * {
    flex: 1 1 auto;
  }

  a {
    color:$secondary
  }

  button:hover {
    cursor: pointer;
  }

  button:active {
    cursor: default;
    background: $secondary;
  }

  .credits {
    position: absolute;
    bottom: 10px;
    right: 1em;
    font-size: .5rem;
    color: $primary
  }

  .flaticon-full-screen, .flaticon-minimize {
    background: $primary;
    padding: 1.25rem 1.2rem 1.1rem .05rem;
    border-radius: 25px;
    float: left;
    border: none;
    color: #FFFFFF;
    outline: none;
    font-weight: 900;
    position: absolute;
    bottom: 35px;
    right: 1em;
    -webkit-box-shadow: 4px 3px 21px -3px rgba(0,0,0,0.8); 
    box-shadow: 4px 3px 21px -3px rgba(0,0,0,0.8);

    @media screen and (max-width: 450px) {
      display: none;
    }
  }
}
</style>