<template>
  <div class="snt-editor">
    <div class="snt-editor__wrapper">
      <div
        ref="toolbar"
        class="snt-editor__toolbar">
        <div class="snt-editor__viewpages">
          <v-select
            :value="viewPage"
            :items="viewPages"
            :menu-props="{
              'transition':'slide-y-transition',
              'content-class': 'menu-offset--left-0',
              'offset-y': true
            }"
            item-text="text"
            item-value="value"
            hide-details
            outlined
            dense
            @input="setViewPage($event)" />
        </div>
        <div class="snt-editor__responsive">
          <v-btn
            :color="isDevice === 'laptop' ? 'primary' : 'secondary'"
            icon
            @click="setDevice('laptop')">
            <v-icon size="20">
              mdi-monitor
            </v-icon>
          </v-btn>
          <v-btn
            :color="isDevice === 'tablet' ? 'primary' : 'secondary'"
            icon
            @click="setDevice('tablet')">
            <v-icon size="20">
              mdi-tablet
            </v-icon>
          </v-btn>
          <v-btn
            :color="isDevice === 'mobile' ? 'primary' : 'secondary'"
            icon
            @click="setDevice('mobile')">
            <v-icon size="20">
              mdi-cellphone
            </v-icon>
          </v-btn>
        </div>
        <v-spacer />
        <div class="snt-editor__theme">
          <snt-color-picker
            ref="colorPrimary"
            :value="theme.color.primary"
            size="36"
            @input="setThemeColor('primary', $event)" />
          <snt-color-picker
            ref="colorSecondary"
            :value="theme.color.secondary"
            size="36"
            @input="setThemeColor('secondary', $event)" />
          <snt-color-picker
            ref="colorAccent"
            :value="theme.color.accent"
            size="36"
            @input="setThemeColor('accent', $event)" />
        </div><!--  -->
      </div>
      <div
        id="previewPlaceholder"
        ref="previewPlaceholder"
        :class="{
          'snt-preview__container--tablet': isDevice === 'tablet',
          'snt-preview__container--mobile': isDevice === 'mobile',
        }">
        <iframe
          id="preview"
          :key="`iframe-preview`"
          :src="viewPageUrl"
          class="snt-editor-iframe"
          frameborder="0"
          allowfullscreen />
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import SntColorPicker from '../../components/common/SntColorPicker.vue'

export default {
  components: { SntColorPicker },
  data () {
    return {
      isDevice: 'laptop',
      viewPages: [
        {
          text: 'Home',
          value: 'Home'
        },
        {
          text: 'Products',
          value: 'Products'
        },
        {
          text: 'Product Detail',
          value: 'ProductDetail'
        },
        {
          text: 'Cart',
          value: 'Cart'
        },
        {
          text: 'Checkout',
          value: 'Checkout'
        },
        {
          text: 'Payment',
          value: 'Payment'
        },
        {
          text: 'Orders',
          value: 'Orders'
        },
        {
          text: 'Order',
          value: 'Order'
        }
      ]
    }
  },

  computed: {
    ...mapGetters({
      viewPage: 'local/viewPage',
      theme: 'local/theme'
    }),
    slug () {
      return this.$route.params.slug
    },
    viewPageUrl () {
      return this.getUrl(this.viewPage)
    }
  },
  beforeDestroy () {
    window.removeEventListener('blur', this.onClickIFrame)
  },
  mounted () {
    window.addEventListener('blur', this.onClickIFrame)
  },
  methods: {
    ...mapActions({
      setViewPage: 'local/setViewPage',
      setTheme: 'local/setTheme'
    }),
    onClickIFrame () {
      const evt = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
      })
      this.$refs.toolbar.dispatchEvent(evt)
      this.$refs.colorPrimary.menu = false
      this.$refs.colorSecondary.menu = false
      this.$refs.colorAccent.menu = false
    },
    setThemeColor (key, value) {
      this.setTheme({
        color: this.$_.defaults({
          [key]: value
        }, this.theme.color)
      })
    },
    setDevice (isDevice) {
      this.isDevice = isDevice
    },
    getUrl (viewPage) {
      const templateUrl = `/public/${this.slug}`
      switch (viewPage) {
        case 'Products':
          return `${templateUrl}/products`
        case 'ProductDetail':
          return `${templateUrl}/products/default`
        case 'Cart':
          return `${templateUrl}/cart`
        case 'Checkout':
          return `${templateUrl}/checkout`
        case 'Payment':
          return `${templateUrl}/payment`
        case 'Order':
          return `${templateUrl}/orders/default`
        case 'Orders':
          return `${templateUrl}/orders`
        default:
          return `${templateUrl}/`
      }
    }
  }
}
</script>
<style>
  .snt-editor__viewpages fieldset {
    border: 0 !important;
  }

</style>
<style lang="scss" scoped>
  .snt-editor__wrapper {
    position: relative;
  }
  .snt-editor__toolbar {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    min-width: 600px;
    height: 40px;
    border-bottom: 1px solid #E4E4E4;
    z-index: 10;
    transition: top .6s cubic-bezier(.645,.045,.355,1);
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 12%), 0 2px 10px 0 rgb(0 0 0 / 8%), 0 1px 20px 0 rgb(0 0 0 / 8%);
  }
  .snt-editor__viewpages {
    border-right: 1px solid #E4E4E4;
    width: 200px;
  }
  .snt-editor__responsive {
    border-right: 1px solid #E4E4E4;
    padding: 2px 4px;
  }
  .snt-editor__theme {
    display: flex;
    gap: 4px;
    border-left: 1px solid #E4E4E4;
    padding: 2px 4px;
  }
  #previewPlaceholder {
    position: relative;
    top: 40px;
    border: 0;
    width: 100vw;
    height: calc(100vh - 40px);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 12%), 0 2px 10px 0 rgb(0 0 0 / 8%), 0 1px 20px 0 rgb(0 0 0 / 8%);
  }
  .snt-preview__container--tablet {
    width: 768px !important;
    height: calc(100vh - 72px) !important;
    margin: 0 auto !important;
    top: 52px !important;
  }
  .snt-preview__container--mobile {
    width: 320px !important;
    height: calc(100vh - 72px) !important;
    margin: 0 auto !important;
    top: 52px !important;
  }
  .snt-editor-iframe {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border: 0;
    overflow: hidden;
  }

</style>
