<template>
  <div class="container password-container">
    <div class="row m-0">
      <div class="col-12">
        <div class="form-group">
          <label for="dropdown" class="label text-style">{{labelText}}</label>
          <input :type="inputType" class="form-control input-control" v-model="madsPassword">
          <div class="password-error" v-if="appPasswordError">Enter valid password</div>
        </div>
      </div>
    </div>
    <div class="row m-0">
      <div class="col-12 mb-3 mt-3 mads-footer">
        <b-button
          class="border-less-btn"
          @click="onBack()"
        >Back</b-button>
        <b-button
          variant="primary"
          class="save-btn"
          @click="onNext()"
        >{{saveBtnText}}</b-button>
      </div>
    </div>
  </div>
</template>

<script>
import dashboardEventBus from '../../../dashboardBus'

export default {
  props: ['currentUser', 'selectedDashboard', 'dashboardService', 'commonService'],
  data () {
    return {
      madsPassword: null,
      appPasswordError: false,
      saveBtn: false
    }
  },
  methods: {
    onBack () {
      this.$emit('on-back-reset-password')
    },
    onNext () {
      if (this.saveBtn) {
        this.makeDashboardPrivate()
      } else {
        this.validateAppPassword()
      }
    },
    validateAppPassword () {
      let config = { orgId: this.currentUser.org.id }
      let params = { password: this.madsPassword }

      this.commonService.validateCredentials(config, params).then((response) => {
        if (response.id) {
          this.revealPassword()
          this.appPasswordError = false
          this.saveBtn = true
        } else {
          this.appPasswordError = true
        }
      })
    },
    revealPassword () {
      let config = {
        orgId: this.currentUser.org.id,
        id: this.selectedDashboard.id,
        uuid: this.selectedDashboard.uuid
      }

      this.dashboardService.showCredentials(config).then((response) => {
        this.madsPassword = response.password
      })
    },
    makeDashboardPrivate () {
      let params = {
        is_secure: true,
        password: this.madsPassword
      }
      let config = {
        orgId: this.currentUser.org.id,
        id: this.selectedDashboard.id,
        uuid: this.selectedDashboard.uuid
      }

      this.dashboardService
        .updateExportDashboard(config, params)
        .then((response) => {
          let exportedUrl = this.$_.merge(
            {},
            this.selectedDashboard.exported_url,
            { is_secure: true }
          )
          let updatedDashboard = this.$_.merge({}, this.selectedDashboard, {
            exported_url: exportedUrl
          })
          dashboardEventBus.$emit('update-dashboard', updatedDashboard)
          this.$toastr.success('Password changed successfully')
          this.onBack()
        })
        .catch(() => {
          this.$toastr.success('Something went wrong')
        })
    }
  },
  computed: {
    saveBtnText () {
      return this.saveBtn ? 'Save' : 'Next'
    },
    inputType () {
      return this.saveBtn ? 'text' : 'password'
    },
    labelText () {
      return this.saveBtn ? 'Enter new password' : 'Enter MADS Password for making changes'
    }
  }
}
</script>

<style lang="scss" scoped>
.password-container {
  .label {
    color: #acb5bd;
    margin-bottom: 0;
  }
  .text-style {
      font-size: 12px;
      line-height: 24px;
  }
  .input-control {
    border: 1px solid #ACB5BD;
    border-radius: 8px;
    height: 51px;
  }
  .password-error {
    font-size: 12px;
    color: #ff0000;
  }
  .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>
