<template>
  <transition name="fade">
    <div v-if="isOpen" class="fl-room-panel-right-container">
      <div class="fl-room-panel-right"
           v-click-outside="{
          handler: close,
          events: ['mousedown']
        }"
      >
        <fl-loading-secondary
          v-if="!hasRoom || viewLoader"
        />
        <div class="fl-room-panel-right-data">
          <div class="fl-room-panel-right-data__title"> {{ getTitle(activeRoom) }}</div>
          <h2 class="fl-room-panel-right-data__price"> {{ activeRoom.price | currency}}</h2>
          <fl-tag-status
            :status="getTitleStatus(activeRoom)"
            has-background
            class="fl-room-panel-right-data__status"
          />
          <fl-block-image
            class="fl-room-panel-right-data__image"
            :url="activeRoom.plan && activeRoom.plan.image.url"
          />
          <fl-block-description
            :room="activeRoom"
          />
        </div>
        <div class="fl-room-panel-right-footer">
          <fl-button
            v-if="(hasRoom && options.activeRoomInDeal.id !== activeRoomId) || options.selectAnyRoom"
            type="is-primary"
            :title="options.buttonAddTextPanel"
            full-width
            :disabled="!options.selectAnyRoom && (isRoomSold(activeRoom.sale_status) || isRoomReservation(activeRoom.sale_status))"
            class="fl-room-panel-right-footer__button--add"
            @click="createDeal"
          />
          <fl-button
              v-if="hasRoom && options.activeRoomInDeal.id === activeRoomId"
              type="is-primary"
              :title="options.buttonRemoveTextPanel"
              full-width
              class="fl-room-panel-right-footer__button--remove"
              @click="removeRoom"
          />
        </div>
        <fl-icon
          name="close"
          class="close-widget"
          @click="close"
        />
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import FlLoadingSecondary from '@/core-components/FlLoadingSecondary'
import FlButton from '@/core-components/form/FlButton'
import FlIcon from '@/core-components/icon/FlIcon'
import FlBlockDescription from '@/components/panel/FlBlockDescription'
import FlBlockImage from '@/components/panel/FlBlockImage'
import cardMixin from '@/mixins/cardMixin'
import FlTagStatus from '@/components/FlTagStatus'

export default {
  name: 'FlRoomPanelInfo',
  components: { FlTagStatus, FlBlockImage, FlBlockDescription, FlIcon, FlButton, FlLoadingSecondary },
  mixins: [cardMixin],
  props: {
    isOpen: {
      type: Boolean,
      default: false
    },
    activeRoomId: {
      type: Number,
      default: 0
    }
  },

  data () {
    return {
      viewLoader: false,
      activeRoom: {}
    }
  },

  computed: {
    ...mapState(['options']),
    ...mapGetters(['isRoomSold', 'isRoomReservation']),

    hasRoom () {
      return Boolean(Object.keys(this.activeRoom).length)
    }
  },

  methods: {
    close () {
      this.$emit('close')
    },

    removeRoom () {
      this.$emit('remove-room')
      this.close()
    },

    createDeal () {
      this.$emit('click-create-deal', this.activeRoom)
      this.close()
    }
  },

  watch: {
    async isOpen (value) {
      if (value) {
        await this.$store.dispatch('getRoom', this.activeRoomId)
          .then((data) => {
            this.activeRoom = data
          })
      } else {
        this.activeRoom = {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .fl-room-panel-right-container {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba($black-01, 0.1);
  }

  .fl-room-panel-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 368px;
    height: 100%;
    background: $light-01;
  }

  .fl-room-panel-right-data {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin-bottom: 80px;
    padding: 20px 20px 80px;
    overflow: scroll;
  }

  .fl-room-panel-right-footer {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    background: $light-01;
    border-top: 1px solid $light-02;
  }

  .fl-room-panel-right-data__image {
    width: 100%;
    height: 210px;
    margin: 25px 0 40px;
  }

  .fl-room-panel-right-data__price {
    margin-bottom: 10px;
    font-size: 30px;
    letter-spacing: -0.52px;
  }

  .fl-room-panel-right-data__status {
    width: min-content;
    cursor: initial;
  }

  .fl-room-panel-right-data__title {
    font-size: 22px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.2s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>
