<template>
  <div>
    <div id="mainuserbox">
      <div>
        <b> <h5 id="userheader"> User Management </h5> </b>
      </div>
      <div id="searchbar">
        <div class="row">
          <div class="column">
            <div class="row">
              <q-input class="inputspace" placeholder="First Name" color="secondary" v-model="fname" @input="finduser()"/>
              <q-input class="inputspace" placeholder="Last Name" color="secondary" v-model="lname" @input="finduser()"/>
            </div>
            <div class="row">
              <q-input class="inputspace" placeholder="Phone Number" color="secondary" v-model="phonenumber" @input="finduser()"/>
              <q-input class="inputspace" placeholder="Address" color="secondary" v-model="address" @input="finduser()"/>
            </div>
          </div>
          <div>
            <div class="row">
              <q-btn icon="clear" color="secondary" @click="clear()" class="inputspace" @keyup.native.esc="clear()">
                <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                  Clear (Ctrl + Q)
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </div>
      </div>
      <center v-if="users.length===0">
        <h6 class="secondarycolor"> No Results </h6>
        <q-btn v-if="!arefieldsempty()" label="Add New User" class="inputspace" color="secondary" @click="adduser()"/>
      </center> <br>
      <div id="userlist">
        <div class="row justify-center">
          <q-card color="secondary" dark class="q-ma-sm" v-for="user in users" :key="user.UserID" >
            <q-card-title>
              <div class="row">
                <div class="row">
                  <div id="leftrow">
                    <p class="margintop"><b>First Name:</b></p>
                    <p class="margintop"><b>Last Name:</b> </p>
                    <p class="margintop"><b>Phone Number:</b> </p>
                    <p class="margintop"><b>Address:</b> </p>
                    <p class="margintop"><b>Username:</b> </p>
                    <p class="margintop marginbottom"> <b>Password:</b> </p>
                  </div>
                  <div id="rightrow">
                    <p class="margintop">{{ user.FirstName }}</p>
                    <p class="margintop">{{ user.LastName }}</p>
                    <p class="margintop">{{ user.PhoneNumber }}</p>
                    <p class="margintop">{{ user.Address }}</p>
                    <p class="margintop">{{ user.Username }}</p>
                    <p class="margintop marginbottom">
                      <q-input type="password" :value="user.Password" class="margintop passcode" color="secondary" inverted readonly :style="{'min-width': width}"/>
                    </p>
                  </div>
                </div>
                <div class="column" slot="right">
                  <div>
                    <q-icon name="person" size="50px"/>
                  </div>
                </div>
              </div>
            </q-card-title>

            <q-card-separator />
            <q-card-actions>
              <q-btn icon="edit" @click="edituser(user)" class="inputspace">
                <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                  Edit
                </q-tooltip>
              </q-btn>
              <q-btn icon="delete" color="secondary" @click="deactivate(user)" class="inputspace">
                <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                  Deactivate
                </q-tooltip>
              </q-btn>
            </q-card-actions>
          </q-card>
        </div>
      </div>
      <q-dialog
          v-model="dialog1"
          prevent-close
        >
          <span slot="title" class="secondarycolor"> Edit User </span>
          <template slot="message">
            <div class="secondarycolor marginbottom"> First Name: </div>
            <q-input v-model="newfname" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Last Name: </div>
            <q-input v-model="newlname" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Address: </div>
            <q-input v-model="newaddress" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Phone Number: </div>
            <q-input v-model="newphonenumber" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Username: </div>
            <q-input v-model="newusername" type="textarea" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Password: </div>
            <q-input v-model="newpassword" color="secondary" @input="popupinput()" type="password"/>
          </template>
          <span slot="buttons" slot-scope="props">
            <q-btn label="Submit" color="secondary" @click="yesclicked()" :disable="edituserdisable"/>
            <q-btn label="Cancel" color="red" @click="noclicked()"/>
          </span>
        </q-dialog>
        <q-dialog
          v-model="dialog3"
          color="secondary"
        >
          <span slot="title" class="secondarycolor"> Update Request </span>
          <span slot="message"> User Edited Successfully </span>
        </q-dialog>
        <q-dialog
          v-model="dialog4"
          color="secondary"
        >
          <span slot="title" class="secondarycolor"> Addition Request </span>
          <span slot="message"> User Added Successfully </span>
        </q-dialog>
        <q-dialog
          v-model="dialog2"
          prevent-close
        >
          <span slot="title" class="secondarycolor"> Add User </span>
          <template slot="message">
            <div class="secondarycolor marginbottom"> First Name: </div>
            <q-input v-model="newfname" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Last Name: </div>
            <q-input v-model="newlname" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Address: </div>
            <q-input v-model="newaddress" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Phone Number: </div>
            <q-input v-model="newphonenumber" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Username: </div>
            <q-input v-model="newusername" type="textarea" color="secondary" @input="popupinput()"/>
            <div class="secondarycolor topspace marginbottom"> Password: </div>
            <q-input v-model="newpassword" color="secondary" @input="popupinput()" type="password"/>
            <div class="secondarycolor topspace marginbottom"> Admin Privilege: </div> <br>
            <q-checkbox v-model="admin" label="Admin" color="secondary"/> <br>
          </template>
          <span slot="buttons" slot-scope="props">
            <q-btn label="Submit" color="secondary" @click="yesclicked1()" :disable="edituserdisable"/>
            <q-btn label="Cancel" color="red" @click="noclicked1()"/>
          </span>
        </q-dialog>
        <q-dialog
          v-model="dialog5"
          color="secondary"
        >
          <span slot="title" class="secondarycolor"> Deactivate </span>
          <span slot="message"> Are you sure you want to deactivate this user? </span>
          <span slot="buttons" slot-scope="props">
            <q-btn label="Yes" color="secondary" @click="yesclicked2()"/>
            <q-btn label="No" color="red" @click="noclicked2()"/>
          </span>
        </q-dialog>
        <q-dialog
          v-model="dialog6"
          color="secondary"
        >
          <span slot="title" class="secondarycolor"> Deactivation Request </span>
          <span slot="message"> User has been deactivated successfully </span>
        </q-dialog>
    </div>
  </div>
</template>

<script>
export default {
  // name: 'ComponentName',
  data () {
    return {
      fname: "",
      lname: "",
      users: [],
      newfname: "",
      newlname: "",
      newusername: "",
      newpassword: "",
      dialog1: false,
      dialog2: false,
      edituserdisable: true,
      dialog3: false,
      userid: null,
      dialog4: false,
      dialog5: false,
      dialog6: false,
      visibility: false,
      visicon: "visibility_off",
      admin: false,
      phonenumber: "",
      address: "",
      newphonenumber: "",
      newaddress: "",
      width: ""
    }
  },
  mounted() {
    this.$nextTick (() => {
      //this.width=document.getElementById("rightrow").offsetWidth + "px"
    })
  },
  methods: {
    clear: function () {
      this.fname=""
      this.lname=""
      this.users=[]
      this.address=""
      this.phonenumber=""
    },
    arefieldsempty: function () {
      if(this.fname=="" && this.lname=="")
      {
        return true
      }
      else
      {
        return false
      }
    },
    adduser: function () {

    },
    input: function () {
      this.visibility=false
      this.visicon="visibility_off"
      if(this.fname=="" && this.lname=="" && this.address && this.phonenumber)
      {
        this.users=[]
      }
      else{
        this.finduser()
      }
    },
    finduser: function () {
      if(this.fname!=''||this.lname!=''||this.address!=''||this.phonenumber!='')
      {
        this.$Socket.emit('finduser', {
          FirstName: this.fname,
          LastName: this.lname,
          Address: this.address,
          PhoneNumber: this.phonenumber
        }, (userlist) => {
            this.users=userlist
          }
        )
      }
      else
      {
        this.users=[]
      }
    },
    popupinput: function () {
      if( this.newfname=="" || this.newlname =="" || this.newusername=="" || this.newpassword=="" || this.newaddress=="" || this.newphonenumber=="")
      {
        this.edituserdisable=true
      }
      else {
        this.edituserdisable=false
      }
    },
    yesclicked: function () {
      this.$Socket.emit('edituser', {
        UserID: this.userid,
        FirstName: this.newfname,
        LastName: this.newlname,
        Address: this.newaddress,
        PhoneNumber: this.newphonenumber,
        Username: this.newusername,
        Password: this.newpassword
      }, ({authenticated}) => {
        if(authenticated==true)
        {
          this.dialog1=false
          this.dialog3=true
          this.clearpopup()
          this.finduser()
        }
      })
    },
    clearpopup: function () {
      this.newfname=""
      this.newlname=""
      this.newusername=""
      this.newpassword=""
      this.newaddress=""
      this.newphonenumber=""
      this.admin=false
    },
    noclicked: function () {
      this.clearpopup()
      this.dialog1=false
    },
    edituser: function (user) {
      this.newfname=user.FirstName
      this.newlname=user.LastName
      this.newaddress=user.Address
      this.newphonenumber=user.PhoneNumber
      this.newusername=user.Username
      this.newpassword=user.Password
      this.dialog1=true
      this.edituserdisable=true
      this.userid=user.UserID
    },
    adduser: function () {
      this.newfname=this.fname
      this.newlname=this.lname
      this.newaddress=this.address
      this.newphonenumber=this.phonenumber
      this.dialog2=true
      this.edituserdisable=true
    },
    noclicked1: function () {
      this.clearpopup()
      this.dialog2=false
    },
    yesclicked1: function () {
      this.$Socket.emit('adduser', {
        FirstName: this.newfname,
        LastName: this.newlname,
        Address: this.address,
        PhoneNumber: this.phonenumber,
        Username: this.newusername,
        Password: this.newpassword,
        PermissionLvl: this.convertbool(this.admin)
      }, ({authenticated}) => {
        if(authenticated==true)
        {
          this.dialog2=false
          this.dialog4=true
          this.finduser()
        }
      })
    },
    convertbool: function (data) {
      if(data==true)
      {
        return 1
      }
      else {
        return 0
      }
    },
    deactivate: function (user) {
      this.dialog5=true
      this.userid=user.UserID
    },
    yesclicked2: function () {
      this.$Socket.emit('deactivateuser', {
        UserID: this.userid
      }, ({authenticated}) => {
        if(authenticated==true)
        {
          this.dialog5=false
          this.dialog6=true
          this.finduser()
        }
      })
    },
    noclicked2: function () {
      this.dialog5=false
    },
    passformat: function (pass) {
      var password=""
      for (var x=0; x<pass.length; x++)
      {
        password= password + "u2022"
      }
      return password
    },
    visibilityfn: function () {
      if(this.visibility==false)
      {
        this.visibility=true
        this.visicon="visibility"
      }
      else
      {
        this.visibility=false
        this.visicon="visibility_off"
      }
    }
  }
}
</script>

<style>
  #mainuserbox {
    text-align: center;
  }
  .passcode {
    max-width: 120px;
  }
  #userheader {
    display: inline-block;
    margin: 10px;
    color: #26a69a;
  }
  #searchbar {
    display: inline-block;
    border-bottom: 2px solid #26A69A;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  #userlist {
    display: inline-block;
    text-align: center;
  }
  .secondarycolor {
    color: #26a69a;
  }
  .marginbottom {
    margin-bottom: -10px;
  }
  .topspace {
    margin-top: 15px;
  }
  #usericon {
    vertical-align: top;
  }
  .margintop {
    margin-top: -15px;
  }
  #visbtn {
    margin-top: 40px;
  }
  .inputspace {
    margin: 5px;
  }
  #leftrow {
    margin-right: 5px;
    text-align: right;
  }
  #rightrow {
    text-align: left;
    margin-left: 5px;
  }
</style>