<template>
  <div class="edit-user-container">
    <div class="edit-user">
      <div>Workday ID</div>
      <div>
        <div class="text-container" :class="{disabled: !isNewUser}"><input type="text" autocomplete="off" :disabled="!isNewUser" class="input-field"
                                                                           v-model="user.workday_id" maxlength="32"/>
        </div>
      </div>
      <div>Firstname</div>
      <div>
        <div class="text-container"><input type="text" autocomplete="off" class="input-field" v-model="user.firstname" maxlength="100"/></div>
      </div>
      <div>Lastname</div>
      <div>
        <div class="text-container"><input type="text" autocomplete="off" class="input-field" v-model="user.lastname" maxlength="100"/></div>
      </div>
      <div>E-Mail</div>
      <div>
        <div class="text-container"><input autocomplete="off" type="email" class="input-field" v-model="user.mail" maxlength="254"/></div>
      </div>
      <div class="group-header">Groups</div>
      <div class="groups-container">
        <group-item v-for="group in groups" :group-obj="group" :key="group.group_name"
                    :selected="isSelected(group.group_name)"
                    @checkbox-changed="updateSelected"></group-item>
      </div>
      <div></div>
    </div>
    <div class="add-app-footer">
      <basic-button :show-icon="false" @click="closeModal(true)" :disabled="disableButton"> {{
          applyText
        }}
      </basic-button>
      <basic-button :show-icon="false" @click="closeModal(false)" variant="secondary">Cancel</basic-button>
    </div>
  </div>
</template>

<script>

import BasicButton from "@/components/UI/BasicButton.vue";
import GroupItem from "@/components/UI/GroupItem.vue";
import {mapStores} from "pinia";
import {useGroupStore} from "@/store/group.js";

export default {
  name: "EditUser",
  components: {GroupItem, BasicButton},
  props: {
    user: {
      type: Object,
      required: true
    },
    isNewUser: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      groups: null,
    }
  },
  methods: {
    validate(type) {
      if (type === "firstname") {
        firstName
      }
    },
    closeModal(save) {
      this.$emit("close", save);
    },
    isSelected(groupName) {
      if (groupName === null || this.user?.groups == null || Object.keys(this.groups).length === 0)
        return false;

      return this.user.groups.includes(groupName);
    },
    updateSelected(checked, groupName) {


      const idx = this.user.groups?.indexOf(groupName);

      if (checked) {
        if ((idx ?? null) !== null && idx === -1)
          this.user.groups.push(groupName);

      } else {
        if ((idx ?? null) !== null && idx !== -1)
          this.user.groups.splice(idx, 1);
      }

    },
  },
  computed: {
    ...mapStores(useGroupStore),
    applyText() {
      return this.isNewUser ? "Create user" : "Update user";
    },
    mailValid() {
      return String(this.user.mail)
          .toLowerCase()
          .match(
              /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          );
    },
    disableButton() {
      return !this.mailValid ||
          !(this.user.groups.length !== 0
              && this.user.firstname?.length !== 0
              && this.user.lastname?.length !== 0
              && this.user.mail?.length !== 0
              && this.user.workday_id?.length !== 0);

    }
  },
  async created() {
    await this.groupStore.loadGroups()
    this.groups = this.groupStore.groups
    this.groups?.forEach(group => {
      group.selected = false;
    })
  },
}
</script>


<style scoped>


.add-app-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}


.edit-user-container {
  min-width: 100rem;
}

.edit-user {
  padding: 1.6rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1.6rem;
  font-weight: 500;
  font-size: 1.4rem;
  align-items: center;
}

.groups-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.8rem;
}

.group-header {
  align-self: start;

}


.input-field {
  border: none;
  outline: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 1.4rem;
  color: #002F54;
  width: 100%;
  min-width: 5rem;
  padding: 0.6rem 1.2rem;
}


.text-container.disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  border-color: #f3f4f6;
}

.text-container.disabled input {
  cursor: not-allowed;
}


.text-container:hover:not(.disabled) {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  transform: scale(1.01);

}

.text-container {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
  border: 0.2rem solid #E3EDFF;
  transition: all 0.1s ease;
  flex: 1 0 auto;
}



</style>