<template>
  <div class="container main-container">
      <div class="row m-0" v-if="choice || selectedDashboard.exported_url">
          <div class="col-12 mt-2">
              <div class="form-group">
                  <label for="dropdown" class="label text-style">Privacy</label>
                  <multiselect
                      v-model="value"
                      label="title"
                      track-by="title"
                      :options="options"
                      :option-height="104"
                      :show-labels="false"
                      :select-label="''"
                      :selected-label="''"
                      :deselect-label="''"
                  >
                      <template slot="singleLabel" slot-scope="props">
                          <span class="option__desc">
                              <div class="option__title">{{ props.option.title }}</div>
                              <div class="option__title">{{ props.option.desc }}</div>
                          </span>
                      </template>
                      <template slot="option" slot-scope="props">
                          <div class="option__desc">
                              <div class="option__title">{{ props.option.title }}</div>
                              <div class="option__small">{{ props.option.desc }}</div>
                          </div>
                      </template>
                  </multiselect>
              </div>
              <div class="reset-password" @click="onResetPassword()" v-if="selectedDashboard.exported_url || exported">
                <div v-if="passwordToggler">Reset Password</div>
              </div>
          </div>
      </div>
      <!-- Already Exported -->
      <div class="row m-0" v-if="selectedDashboard.exported_url || exported">
          <div class="col-12">
              <div class="row m-0 d-flex align-items-center dashboard-url">
              <div class="col-9 d-inline-block text-truncate">
                  <a :href="dashboardUrl" target="_blank" class="url">{{dashboardUrl}}</a>
              </div>
              <div class="col-3 d-flex justify-content-end">
                  <div
                    ref="container"
                    @click="copyDashboardUrl(dashboardUrl)"
                    class="cursor-pointer copy-btn"
                  >
                    Copy Link
                  </div>
              </div>
          </div>
          </div>
      </div>
      <!-- Not Exported -->
      <div class="row m-0" v-if="!selectedDashboard.exported_url && !exported">
          <div class="row m-0" v-if="passwordToggler">
              <div class="col-12">
                  <div class="form-group">
                      <label for="dropdown" class="label text-style">Enter Password</label>
                      <input
                          type="text"
                          v-model="passowrd"
                          class="form-control"
                          placeholder="Enter Password"
                      />
                  </div>
              </div>
          </div>
          <div class="row m-0" v-if="!exported && choice">
              <div class="col-12 d-flex justify-content-end">
                  <button
                      class="btn btn-outline-primary btn-custome"
                      :disabled="btnDisable"
                      @click="onExport"
                  >Generate Link</button>
              </div>
          </div>
      </div>
      <!-- More Ways To Share -->
      <more-ways-to-share v-if="exported || selectedDashboard.exported_url" :selectedDashboard="selectedDashboard" :dashboardUrl="dashboardUrl"></more-ways-to-share>
  </div>
</template>

<script>
import moreWaysToShare from './moreWaysToShare.vue'

export default {
  components: {
    moreWaysToShare
  },
  props: ['selectedDashboard', 'currentUser', 'choice', 'exported', 'selectedOption', 'dashboardUrl', 'dashboardService'],
  data () {
    return {
      // dashboardUrl: null,
      passowrd: null,
      shareByEmail: false,
      value: { title: 'Private', desc: 'Only people can access this dashboard by shared password' },
      options: [
        { title: 'Private', desc: 'Only people can access this dashboard by shared password' },
        { title: 'Public', desc: 'Anyone can access this dashboard by shared link!' }
      ],
      emailTag: [],
      emailOptions: []
    }
  },
  methods: {
    copyDashboardUrl (url) {
      let container = this.$refs.container

      this.$copyText(url, container).then(() => {
        alert('Copied')
      })
    },
    onExport () {
      let params = {}
      if (this.value.title === 'Private') {
        this.$emit('set-selected-option', true)
        params = {
          'is_secure': true,
          'password': this.passowrd
        }
      } else {
        this.$emit('set-selected-option', false)
        params = {
          'is_secure': false,
          'password': ''
        }
      }
      let config = { orgId: this.currentUser.org.id, id: this.selectedDashboard.id }

      this.dashboardService.export(config, params)
        .then((response) => {
          this.$emit('set-url', response.url)
          this.$emit('set-exported', true)
        })
        .catch((error) => {
          let errors = error.source
          this.validations_password = this.$_.merge({}, this.validations_password, {
            errorMessages: errors['password'],
            isValid: false
          })
        })
    },
    onResetPassword () {
      this.$emit('on-reset-password')
    }
  },
  mounted () {
    this.selectedOption ? this.value = this.options[0] : this.value = this.options[1]
    this.selectedDashboard.exported_url ? this.$emit('set-url', this.selectedDashboard.exported_url.url) : this.$emit('set-url', this.dashboardUrl)
  },
  computed: {
    passwordToggler () {
      return this.value.title === 'Private'
    },
    btnDisable () {
      if (this.value.title === 'Public') {
        return false
      } else if (this.passowrd) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-container {
    max-height: 50vh;
    overflow-x: hidden;
    overflow-y: scroll;
    .text-common-style {
        font-size: 12px;
        line-height: 24px;
    }
    .label {
        color: #acb5bd;
        margin-bottom: 0;
    }
    .text-style {
        font-size: 12px;
        line-height: 24px;
    }
    .form-control {
        height: 44px;
        border-radius: 8px;
        border: 1px solid #acb5bd;
    }
    .btn-custome {
        border-radius: 8px;
        height: 30px;
        color: #0d85da;
        border-color: #0d85da;
    }
    .reset-password {
      font-weight: 600;
      font-size: 12px;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 1rem;
      cursor: pointer;
    }
    .dashboard-url {
        background: rgba(13, 133, 218, 0.05);
        height: 45px;
        border-radius: 8px;
        .text-truncate {
            overflow: hidden;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .copy-btn {
            color: #0d85da;
            font-weight: 600;
            font-size: 12px;
            line-height: 24px;
        }
    }
}
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: #49505733;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #49505733;
}
</style>

<style lang="scss">
.main-container {
  .multiselect {
    .multiselect__tags {
        height: 70px;
        padding: 14px 52px 8px 8px;
        border: 1px solid #acb5bd;
        border-radius: 8px;
    }
    .multiselect__select {
        height: 70px;
    }
    .multiselect__tag {
      background: transparent;
      border: 1px solid #ACB5BD;
      color: #212429;
    }
  }
}
</style>
