<template>
  <b-modal id="export-dashboard" ref="exportDashboard" size="md" hide-footer @hidden="onCancel()">
    <div class="export-dashboard-modal">
      <div class="header">
        <div class="share-dashboard">
          <p>Share Dashboard</p>
        </div>
        <div class="dashboard-name">
          <span>
            <svg class="icon">
              <use xlink:href="/assets/img/mads-common-icons.svg#union" />
            </svg>
          </span>
          <div class="name">
            <span class="heading">Dashboard Name</span>
            <span class="dash-name">{{ selectedDashboard.name }}</span>
          </div>
        </div>
      </div>
      <div v-if="!resetPassword">
        <div v-if="selectedDashboard.exported_url">
        <the-tabs @on-share-by-link="tabShareByLink" @on-share-by-cockpit="tabShareByCockpit"></the-tabs>
        <share-by-link v-if="shareByLink"
        :selectedDashboard="selectedDashboard"
        :currentUser="currentUser"
        :choice="choice"
        :exported="exported"
        :dashboardUrl="dashboardUrl"
        :selectedOption="selectedOption"
        :dashboardService="dashboardService"
        @on-reset-password="onResetPassword"
        @set-exported="setExported"
        @set-selected-option="setSelectedOption"
        @set-url="setUrl"
        ></share-by-link>
        <share-by-cockpit v-if="shareByCockpit"
          ref="shareByCockpit"
          :selectedDashboard="selectedDashboard"
          :currentUser="currentUser"
          :cockpitDoneBtn="cockpitDoneBtn"
          :dashboardService="dashboardService"
          @share-btn-toggle="shareBtnToggle"
          @close-modal="onCancel"
          @manage-access="onManageAccess"
        ></share-by-cockpit>
      </div>
      <div v-else>
        <div class="mb-4">
          <not-exported v-if="!choice && !exported"
            @share-by-link="onShareByLink"
            @share-by-cockpit="onShareByCockpit"
          ></not-exported>
          <the-tabs v-if="choice"
            @on-share-by-link="tabShareByLink"
            @on-share-by-cockpit="tabShareByCockpit"
          ></the-tabs>
          <share-by-link v-if="shareByLink"
            :selectedDashboard="selectedDashboard"
            :currentUser="currentUser"
            :choice="choice"
            :selectedOption="selectedOption"
            :exported="exported"
            :dashboardUrl="dashboardUrl"
            :dashboardService="dashboardService"
            @on-reset-password="onResetPassword"
            @set-exported="setExported"
            @set-selected-option="setSelectedOption"
            @set-url="setUrl"
          ></share-by-link>
          <share-by-cockpit v-if="shareByCockpit"
            ref="shareByCockpit"
            :selectedDashboard="selectedDashboard"
            :currentUser="currentUser"
            :cockpitDoneBtn="cockpitDoneBtn"
            :dashboardService="dashboardService"
            @share-btn-toggle="shareBtnToggle"
            @close-modal="onCancel"
            @manage-access="onManageAccess"
          ></share-by-cockpit>
        </div>
      </div>
      </div>
      <reset-password v-if="resetPassword"
        :currentUser="currentUser"
        :selectedDashboard="selectedDashboard"
        :dashboardService="dashboardService"
        :commonService="commonService"
        @on-back-reset-password="onBackResetPassword"
      ></reset-password>
      <div class="row m-0" v-if="!resetPassword">
        <div class="mads-footer mb-3 mt-3 col-12">
        <b-button v-if="!cockpitDoneBtn || shareByLink"
        class="border-less-btn"
        @click="onCancel()"
        >Cancle</b-button>
        <b-button v-if="shareByCockpit && cockpitDoneBtn"
        class="border-less-btn"
        @click="onBack()"
        >Back</b-button>
        <b-button
          variant="primary"
          class="save-btn"
          @click="onShare()"
        >{{shareBtnName}}</b-button>
      </div>
      </div>
    </div>
  </b-modal>
</template>

<script>
import notExported from './common/notExported.vue'
import TheTabs from './common/theTabs.vue'
import ShareByLink from './shareByLink/index.vue'
import ShareByCockpit from './shareByCockpit/index.vue'
import ResetPassword from './common/resetPassword.vue'
export default {
  props: ['currentUser', 'selectedDashboard', 'commonService', 'dashboardService'],
  components: {
    notExported,
    TheTabs,
    ShareByLink,
    ShareByCockpit,
    ResetPassword
  },
  data () {
    return {
      exported: false,
      dashboardUrl: '',
      shareByLink: false,
      shareByCockpit: false,
      choice: false,
      cockpitShareBtn: false,
      cockpitDoneBtn: false,
      resetPassword: false,
      selectedOption: false
    }
  },
  methods: {
    setExported (data) {
      this.exported = data
    },
    open () {
      this.shareByLink = true
      this.shareByCockpit = false
      this.$refs.exportDashboard.show()
    },
    onCancel () {
      this.cockpitDoneBtn = false
      this.$refs.exportDashboard.hide()
    },
    onShareByLink () {
      this.choice = true
      this.shareByLink = true
      this.shareByCockpit = false
    },
    onShareByCockpit () {
      this.choice = true
      this.shareByLink = false
      this.shareByCockpit = true
    },
    tabShareByLink () {
      this.shareByLink = true
      this.shareByCockpit = false
    },
    tabShareByCockpit () {
      this.shareByLink = false
      this.shareByCockpit = true
    },
    shareBtnToggle (toggle) {
      this.cockpitShareBtn = toggle
    },
    onBack () {
      this.cockpitDoneBtn = false
      this.cockpitShareBtn = true
    },
    onManageAccess () {
      this.cockpitDoneBtn = true
      this.cockpitShareBtn = false
      this.$refs.shareByCockpit.getSharedUsers()
    },
    onShare () {
      if (this.shareByCockpit && !this.cockpitDoneBtn) {
        this.$refs.shareByCockpit.onShare()
      } else if (this.cockpitDoneBtn) {
        this.onCancel()
      }
    },
    onResetPassword () {
      this.resetPassword = true
    },
    onBackResetPassword () {
      this.resetPassword = false
    },
    setSelectedOption (option) {
      this.selectedOption = option
    },
    setUrl (url) {
      this.dashboardUrl = url
    }
  },
  mounted () {
    if (this.selectedDashboard.exported_url) {
      this.shareByLink = true
    }
    this.selectedOption = this.selectedDashboard.exported_url && this.selectedDashboard.exported_url.is_secure
  },
  computed: {
    shareBtnName () {
      return this.shareByCockpit && this.cockpitDoneBtn ? 'Done' : 'Share'
    }
  }
}
</script>

<style lang="scss" scoped>
.export-dashboard-modal {
  width: 100%;
  .header {
    .share-dashboard {
      padding: 12px 20px 12px 20px;
      background: #dde2e5;
      border-radius: 6px 6px 0 0;
      p {
        font-size: 16px;
        margin-bottom: 0;
        font-weight: 900;
      }
    }
    .dashboard-name {
      padding: 0 20px;
      padding: 12px 20px 12px 20px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      p {
        font-size: 16px;
        margin-bottom: 0;
        font-weight: 900;
      }
      .icon {
        width: 30px;
        height: 30px;
      }
      .name {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        .heading {
          font-size: 12px;
        }
        .dash-name {
          font-size: 14px;
          font-weight: 700;
        }
      }
    }
  }
  .mads-footer {
    text-align: right;
    .border-less-btn {
      border: none;
      &:hover,
      &:active,
      &:focus {
        background-color: #ffffff;
        border: none;
        color: #000000;
      }
    }
    .save-btn {
      background-color: #4c92c3;
      color: #ffffff;
      min-width: 90px;
      border-color: #4c92c3;
      border: 1px solid #4c92c3;
      border-radius: 8px;
    }
  }
}
</style>
