<template>
  <b-modal id="newTab" ref="newTab" size="md" hide-footer centered>
    <div class="new-tab-wrap">
      <div v-if="!editModal" class="header"><h3>Add Panel</h3></div>
      <div v-else class="header">
        <h3 v-if="editSubpanel">Edit Panel</h3>
        <h3 v-else>Edit Sub Panel</h3>
      </div>
      <div class="body">
        <b-form>
          <b-form-group label="Name">
            <b-input placeholder="Enter tab name" v-model="name"></b-input>
            <span class="error-msg" v-if="!validations_name.isValid">
              <span v-for="(error, index) in validations_name.errorMessages" :key="index">{{error}}</span>
            </span>
          </b-form-group>
          <b-form-group label="Icon">
            <b-input placeholder="Search icon" v-model="searchIcon"></b-input>
            <div class="icons-wrap">
              <div v-for="(icon, index) in getIcons()" :key="index" class="icon" :class="{'active': selectedIcon === icon}" @click="selectIcon(icon)">
                <div class="icon-bg"><font-awesome-icon :icon="icon" /></div>
                <span>{{icon | formatLabel}}</span>
              </div>
            </div>
          </b-form-group>
        </b-form>
      </div>
      <div class="mads-footer">
        <b-button variant="outline-primary" @click="onCancel()">Cancel</b-button>
        <b-button variant="primary" @click="onSave()">Save</b-button>
      </div>
    </div>
  </b-modal>
</template>

<script>
import dasbhoardEventBus from '../dashboardBus'
import fontAwesomeIcons from './fontAwesomeIcons'

export default {
  props: {
    currentUser: {},
    selectedDashboard: {},
    dashboardService: {}
  },
  data () {
    return {
      name: '',
      validations_name: {
        required: true,
        errorMessages: [],
        isValid: true
      },
      selectedIcon: null,
      editModal: false,
      searchIcon: '',
      icons: fontAwesomeIcons,
      parentId: null,
      panelId: null,
      isSubpanel: null
    }
  },
  methods: {
    show (parentId = null, panel = null) {
      this.parentId = parentId
      this.resetValue()
      if (panel) {
        this.editModal = true
        this.name = panel.name
        this.selectedIcon = panel.icon
        this.panelId = panel.id
        this.isSubpanel = panel.panel_id
      } else {
        this.editModal = false
        this.name = ''
        this.selectedIcon = null
        this.panelId = null
      }
      this.$refs.newTab.show()
    },
    getIcons () {
      return this.$_.filter(this.icons, (icon) => {
        return this.$_.includes(this.$_.lowerCase(icon), this.$_.lowerCase(this.searchIcon))
      })
    },
    selectIcon (icon) {
      this.selectedIcon = icon
    },
    onCancel () {
      this.resetValue()
      this.$refs.newTab.hide()
    },
    resetValue () {
      this.validations_name = this.$_.merge({}, this.validations_name, {
        errorMessages: [],
        isValid: true
      })
    },
    onSave () {
      let config = { orgId: this.currentUser.org.id, dashboardId: this.selectedDashboard.id }
      let payload = { name: this.name, icon: this.selectedIcon }

      if (this.parentId) {
        config = this.$_.merge(config, {
          panelId: this.parentId
        })
      } else if (this.editModal) {
        config = this.$_.merge(config, {
          id: this.panelId
        })
      }

      let request = this.parentId ? this.dashboardService.createDashboardSubpanel(config, payload)
        : this.editModal ? this.dashboardService.updateDashboardPanel(config, payload) : this.dashboardService.createDashboardPanel(config, payload)

      request.then((panel) => {
        this.$refs.newTab.hide()
        dasbhoardEventBus.$emit('reload-dashboard')
        if (!this.editModal) {
          this.$toastr.success('New Tab created Successfully!', 'Success', { closeButton: true, closeDuration: 0 })
          this.$emit('panel-created', panel)
        }
      })
        .catch((error) => {
          let source = error.source
          this.validations_name = this.$_.merge({}, this.validations_name, {
            errorMessages: source['name'],
            isValid: false
          })
          this.$toastr.error(error.title, 'Error', { closeButton: true, closeDuration: 0 })
        })
    }
  },
  computed: {
    editSubpanel () {
      return this.isSubpanel === -1
    }
  }
}
</script>

<style lang="scss" scoped>
  .new-tab-wrap {
    width: 100%;
    .header {
      padding: 20px;
      background: #1a4d75;
      border-radius: 5px 5px 0 0;
      h3 {
        margin-bottom: 0;
        font-size: 20px;
        color: white;
      }
    }
    .body {
      padding: 20px 20px 5px 20px;
      background: #f9f9fb;
    }
    .mads-footer {
      text-align: right;
      padding: 5px 20px 20px 20px;
      background: #f9f9fb;
      border-radius: 0px 0px 5px 5px;
      :first-child {
        border: none;
        background: #f9f9fb;
        color: #929294;
      }
      .btn-primary {
        background: #2469a0;
        border: 1px solid #2469a0;
      }
    }
    .icons-wrap {
      margin-top: 22px;
      height: 275px;
      overflow: auto;
      padding: 10px;
      padding-top: 0;
      .icon {
        margin-left: 3px;
        margin-top: 10px;
        width: 16%;
        display: inline-flex;
        flex-direction: column;
        cursor: pointer;
        border-radius: 4px;
        align-items: center;
        justify-content: center;
        .icon-bg {
          width: 90px;
          height: 90px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #efefef;
          border-radius: 6px;
        }
        &.active {
          .icon-bg {
            background: #61e2fa;
            svg {
              path {
                fill: black;
              }
            }
          }
          span {
            padding-top: 10px;
            text-align: center;
          }
        }
        .icon-bg {
          svg {
            width: 24px;
            height: 24px;
            path {
              fill: #a6b0cf;
            }
          }
        }
        span {
          padding-top: 10px;
          text-align: center;
        }
      }
    }
    .icons-wrap {
      &::-webkit-scrollbar{
        width: 5px;
      }
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
      }
      /* Handle */
      &::-webkit-scrollbar-thumb {
        background: rgb(177, 176, 176);
        height: 45px;
        border-radius: 10px;
      }
      /* Handle on hover */
      &::-webkit-scrollbar-thumb:hover {
        background: #555;
      }
    }
  }
</style>
