<template>
  <b-modal ref="duplicatePanelModal" hide-footer @hidden="onCancel()">
    <div class="name-wrap">
      <h4>Duplicate Dashboard</h4>
      <b-form>
        <b-form-group>
          <label class="b-lable text-common-style mb-0" for="b_select"
            >Enter Dashboard 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>
      <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 {
      form: {
        name: ''
      }
    }
  },
  validations: {
    form: {
      name: {
        required,
        minLength: minLength(1)
      }
    }
  },
  methods: {
    show () {
      this.$refs.duplicatePanelModal.show()
    },
    validateState (name) {
      const { $dirty, $error } = this.$v.form[name]
      return $dirty ? !$error : null
    },
    onSave () {
      this.$v.form.$touch()
      if (this.$v.form.$anyError) {
        return
      }
      this.$emit('on-save', this.form.name)
    },
    onCancel () {
      this.$nextTick(() => {
        this.$v.$reset()
      })
      this.form.name = ''
      this.$refs.duplicatePanelModal.hide()
    }
  },
  computed: {
    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;
  }
  .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;
      }
    }
  }
}
</style>
