<template>
  <b-modal ref="duplicatePanelModal" hide-footer @hidden="onCancel()">
    <div class="name-wrap">
      <h4 v-if="panelType">Duplicate Panel</h4>
      <h4 v-else>Duplicate Sub Panel</h4>
      <b-form>
        <b-form-group>
          <label class="b-lable text-common-style mb-0" for="b_select"
            >Enter Panel Name</label
          >
          <b-form-input
            type="text"
            v-model="$v.form.name.$model"
            :state="validateState('name')"
            aria-describedby="name-input"
            class="b-control b-select"
            placeholder="Please enter name"
          ></b-form-input>
          <b-form-invalid-feedback id="name-input">Name is required</b-form-invalid-feedback>
        </b-form-group>
        <b-form-group>
          <label class="b-lable text-common-style mb-0" for="dashboardId"
            >Select Dashboard</label
          >
          <multiselect v-model="selectDashboard" :options="allDashboards" @select="dashboardChange()" :select-label="''" :selected-label="''" :deselect-label="''" track-by="name" label="name" :searchable="true" :allow-empty="false" class="b-control b-select">
            <template slot="singleLabel" slot-scope="{ option }">
              <strong>{{ option.name }}</strong>
            </template>
          </multiselect>
        </b-form-group>
        <b-form-group v-if="displayPanels">
          <label class="b-lable text-common-style mb-0" for="penalId"
            >Select Panel</label
          >
          <multiselect v-model="selectPanel" :options="listOfPanels" :select-label="''" :selected-label="''" :deselect-label="''" track-by="name" label="name" :searchable="true" :allow-empty="true" class="b-control b-select">
            <template slot="singleLabel" slot-scope="{ option }"> <strong>{{ option.name }}</strong></template>
          </multiselect>
        </b-form-group>
      </b-form>
      <div class="mads-footer">
        <b-button
          variant="outline-primary"
          @click="onCancel()"
          class="cancel-btn"
          >Cancel</b-button
        >
        <b-button variant="primary" :disabled="btnDisable === 'disabled'" @click="onSave()" class="save-btn"
          >Save</b-button
        >
      </div>
    </div>
  </b-modal>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, minLength } from 'vuelidate/lib/validators'

export default {
  mixins: [validationMixin],
  data () {
    return {
      allDashboards: [],
      panelList: [],
      selectPanel: '',
      selectDashboard: {},
      form: {
        name: ''
      }
    }
  },
  validations: {
    form: {
      name: {
        required,
        minLength: minLength(1)
      }
    }
  },
  mounted: function () {
    this.loadAllDashboards()
    this.selectDashboard = this.selectedDashboard
  },
  props: {
    displayPanels: {
      type: Boolean
    },
    panelType: {
      type: Boolean
    },
    dashboardService: {},
    currentUser: {},
    selectedDashboard: {}
  },
  methods: {
    show () {
      this.$refs.duplicatePanelModal.show()
    },
    dashboardChange () {
      this.selectPanel = ''
    },
    validateState (name) {
      const { $dirty, $error } = this.$v.form[name]
      return $dirty ? !$error : null
    },
    onSave () {
      this.$v.form.$touch()
      if (this.$v.form.$anyError) {
        return
      }
      let selectPanel = this.selectPanel ? this.selectPanel.id : ''
      let data = {
        'target_dashboard_id': this.selectDashboard.id,
        'name': this.form.name,
        'parent_id': selectPanel
      }
      this.$emit('on-save', data)
    },
    onCancel () {
      this.clearForm()
      this.$refs.duplicatePanelModal.hide()
    },
    loadAllDashboards () {
      let config = { orgId: this.currentUser.org.id }
      const params = {
        page_size: 100,
        page_number: 0
      }
      this.dashboardService.read(config, params).then((response) => {
        this.allDashboards = response.dashboards
        this.selectDashboard = this.allDashboards.find(obj => obj.id === this.selectDashboard.id)
      })
    },
    resetModal () {
      this.clearForm()
      this.loadAllDashboards()
    },
    clearForm () {
      this.form.name = null
      this.selectPanel = null
      this.$nextTick(() => {
        this.$v.$reset()
      })
    }
  },
  computed: {
    listOfPanels () {
      if (this.selectDashboard.panels) {
        return this.selectDashboard.panels.filter(panel => (panel.panel_id === -1))
      }
      return []
    },
    btnDisable () {
      return this.form.name ? 'enabled' : 'disabled'
    }
  }
}
</script>

<style lang="scss" scoped>
.name-wrap {
  width: 100%;
  margin-top: 10px;
  padding: 10px 40px;
  .mads-footer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    .btn {
      min-width: 120px;
      margin-right: 5px;
    }
  }
  .text-common-style {
    font-size: 12px;
    line-height: 24px;
  }
  .b-lable {
    color: #acb5bd;
  }
  .b-control {
    background: #ffffff;
    border: 1px solid #acb5bd;
    border-radius: 8px;
  }
  .b-input {
    height: 44px;
  }
  .b-select {
    height: 52px;
  }
  .v-text-field.v-text-field--solo .v-input__control {
    min-height: 80px;
  }
  .cancel-btn {
    border: none;
    &:hover,
    &:active,
    &:focus {
      background-color: #ffffff;
      border: none;
      color: #000000;
    }
  }
  .save-btn {
    background: #0D85DA;
    border-radius: 8px;
    border: 1px solid #0D85DA;
  }
}
</style>

<style lang="scss">
.modal {
  .modal-content {
    .modal-footer {
      border-top: none;
      .btn {
        min-width: 120px;
      }
    }
  }
}
.multiselect .multiselect__tags {
  height: 52px;
  padding: 16px 52px 8px 8px;
  border-radius: 8px;
  border: none;
}
.multiselect .multiselect__select {
  height: 52px;
}
</style>
