<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <h1>Role</h1>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Role Name</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
          </span>
          <input class="form-control" type="text" name="description" v-model="role.roleName" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="pills-video-tab"
              data-toggle="pill"
              href="#pills-video"
              role="tab"
              aria-controls="pills-video"
              aria-selected="true"
            >Permissions</a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="pills-plans-tab"
              data-toggle="pill"
              href="#pills-plans"
              role="tab"
              aria-controls="pills-plans"
              aria-selected="false"
            >Users</a>
          </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
          <div
            class="tab-pane fade show active"
            id="pills-video"
            role="tabpanel"
            aria-labelledby="pills-video-tab"
          >
            <div class="col-md-12">
              <ListView
                :items="role.permissions"
                :showColumnChooser="false"
                :editable="true"
                :hideSearch="true"
                :deleteable="true"
                :displayColumns="colums"
                @onEdit="Edit"
                @onDelete="Delete"
                @onNew="New"
              />
              <modal name="Prems" :width="600" :height="270">
                <Premission @UpdatePrems="UpdatePrems" :role="CurrentPrem" />
              </modal>
            </div>
          </div>
          <div
            class="tab-pane fade"
            id="pills-plans"
            role="tabpanel"
            aria-labelledby="pills-plans-tab"
          >
            <ListView
              :items="role.users"
              :displayColumns="uCols"
              :showColumnChooser="false"
              :deleteable="true"
              @onDelete="RemoveUser"
              @onNew="FindUser"
            />
            <modal name="users" :width="600" :height="400">
              <UserLookup @SelectedUser="SelectedUser" />
            </modal>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div v-if="wait" id="preloader"></div>
    </div>
    <div class="row"></div>
    <div class="row">
      <div class="col-md-12" style="margin-bottomL 1em">
        <div class="row offset-md-5">
          <div class="col-md-2">
            <button @click="Save()" class="btn btn-b-n" type="button" data-dismiss="modal">Save</button>
          </div>
          <div class="col-md-2">
            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import ListView from "../shared/listView";
import Premission from "./rolePremission";
import UserLookup from "./userLookup";
import Log from "../../assets/Log";

export default {
  name: "Role",
  components: {
    ListView,
    Premission,
    UserLookup,
  },
  data() {
    return {
      wait: false,
      restaurantId: Log.restaurantId(),
      colums: ["target", "navigate", "create", "read", "write"],
      uCols: ["emailAddress", "firstName", "surname", "cellphone"],
      prem: {},
    };
  },
  methods: {
    ...mapActions("restaurantRoles", [
      "getRole",
      "getPremission",
      "saveRole",
      "updateRole",
    ]),
    FindUser() {
      this.$modal.show("users");
    },
    SelectedUser(item) {
      const user = this.role.users.find((u) => u.id === item[0].id);
      if (user) {
        Object.assign(user, item[0]);
      } else {
        this.role.users.push(item[0]);
      }
      this.$modal.hide("users");
    },
    RemoveUser(item) {
      // const user = this.role.users.find((u) => u.id === item.id);
      // if (user) {
      //   this.role.users.pop(user);
      // }
      var index = 0;
      for (let i = 0; i < this.role.users.length; i++) {
        if (this.role.users[i].id == item.id) {
          index = i;
        }
      }
      this.role.users.splice(index, 1);
    },
    New() {
      this.prem = {
        target: "",
        navigate: false,
        create: false,
        read: false,
        write: false,
        delete: false,
      };
      this.$modal.show("Prems");
    },
    Edit(item) {
      this.prem = item;
      this.$modal.show("Prems");
    },
    Delete(item) {
      //Delete item
    },
    UpdatePrems(value) {
      const premItem = this.role.permissions.find(
        (p) => p.target === value.target
      );
      if (premItem) {
        Object.assign(premItem, value);
      } else {
        this.role.permissions.push(value);
      }
      this.$modal.hide("Prems");
    },
    Save() {
      this.role.restaurantId = this.restaurantId;
      if (this.role.id === 0) {
        this.saveRole(this.role);
      } else {
        this.updateRole(this.role);
      }
      this.$router.push("/RestaurantRoles");
    },
    Close() {
      this.$router.push("/RestaurantRoles");
    },
  },
  computed: {
    ...mapState("restaurantRoles", ["role"]),
    CurrentPrem() {
      return this.prem;
    },
  },
  mounted() {
    this.getRole(this.$route.params.id);
  },
};
</script>