<template>
  <div class="user-search-list">
    <form class="search-filter" role="search" @submit.prevent="sendQuery">
      <div class="mb-3">
        <div class="input-group">
          <div class="input-group-append">
            <span class="tavasi tavasi-Component-198--1"></span>
          </div>

          <input
            ref="search-input"
            dir="rtl"
            v-model.trim="searchText"
            type="search"
            required
            class="form-control"
            id="search-query"
            placeholder="جستجو..."
            name="search-query"
            aria-label="جستجو در اسناد، عناوین و واژگان"
            aria-describedby="basic-addon1"
            size="50"
            @keyup="sendQuery()"
            @keydown="onKeyDown()"
          />
          <button
            v-if="searchText.length"
            @click="resetFormAndList"
            type="button"
            class="btn clear-search p-0"
          >
            <svg class="icon icon-Component-294--1">
              <use xlink:href="#icon-Component-294--1"></use>
            </svg>
          </button>
        </div>
      </div>
    </form>
    <div class="d-flex justify-content-between alert alert-secondary">
      <div class="col-6">نام و نام خانوادگی</div>
      <div class="col-4 d-flex justify-content-center">دسترسی</div>
      <div class="col-2 me-3">حذف</div>
    </div>
    <div class="user-list">
      <div
        v-for="list in listMember"
        class="d-flex justify-content-between alert alert-light col-12"
      >
        <div class="col-6">
          {{ list.description }}
        </div>
        <div class="order-select main-page__date-select col-4">
          <select @change="addUser( $event,list)" class="form-control d-block">
            <option selected disabled :value="undefined">
              {{ list.perm }}
            </option>
            <option v-for="role in roles" :key="role.id" :value="role.id">
              {{ role.title }}
            </option>
          </select>
        </div>
        <div class="col-2 d-flex">
          <!-- <span class="btn" title="ویرایش" @click="editMember(list)">
            <svg class="icon edit-member icon-Component-242--1">
              <use xlink:href="#icon-Component-242--1"></use>
            </svg>
          </span> -->
          <span class="btn me-3" title="حذف" @click="deleteMember(list)">
            <svg class="icon delete-member icon-Component-295--1">
              <use xlink:href="#icon-Component-295--1"></use>
            </svg>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: "",
    parentLoading: false,
    searchResults: {
      default() {
        return [];
      },
    },
    listMember: {
      default: null,
    },
  },
  watch: {
    searchResults(newValu) {
      this.users = newValu;
    },
  },
  mounted() {
    this.users = this.searchResults;
  },

  data() {
    return {
      roles: [
        { title: "عادی", id: 1 },
        { title: "مشاهده", id: 10 },
        { title: "سرگروه", id: 500 },
        { title: "مالک", id: 1000 },
      ],
      users: [],
      typingTimer: 0,
      doneTypingInterval: 1000,
      searchText: "",
    };
  },
  methods: {
    selectUserAsAdmin(user) {
      this.$emit("set-as-admin", user);
    },
    getGroupAvatar(user = undefined) {
      try {
        if (user) {
          if (isValidHttpUrl(user.avatar)) return user.avatar;
          else {
            if ("name" in user) {
              const nameArray = user.name?.split(" ");
              if (nameArray?.length > 1) {
                const initials =
                  nameArray[0].charAt(0) + nameArray[1].charAt(0);
                return this.generateAvatarFromChars(initials);
              } else {
                const initials = nameArray[0].charAt(0);
                return this.generateAvatarFromChars(initials);
              }
            } else if ("lastname" in user) {
              const nameArray = user.lastname?.split(" ");
              if (nameArray?.length > 1) {
                const initials =
                  nameArray[0].charAt(0) + nameArray[1].charAt(0);
                return this.generateAvatarFromChars(initials);
              } else {
                const initials = nameArray[0].charAt(0);
                return this.generateAvatarFromChars(initials);
              }
            }
            if ("username" in user) {
              const nameArray = user.username?.split(" ");
              if (nameArray?.length > 1) {
                const initials =
                  nameArray[0].charAt(0) + nameArray[1].charAt(0);
                return this.generateAvatarFromChars(initials);
              } else {
                const initials = nameArray[0].charAt(0);
                return this.generateAvatarFromChars(initials);
              }
            }
          }
        }
      } catch (err) {
        return require("@assets/common/img/default.svg");
      }
    },
    sendQuery() {
      clearTimeout(this.typingTimer);

      this.typingTimer = setTimeout(() => {
        this.search();
      }, this.doneTypingInterval);
    },
    onKeyDown() {
      clearTimeout(this.typingTimer);
    },
    search() {
      this.$emit("on-send", this.searchText);
    },
    resetFormAndList() {
      this.searchText = "";
      this.users = [];
    },
    deleteMember(list) {
      this.$emit("delete-member", list);
    },
    addUser(event, item) {
      this.$emit("edit-member", {
        user_id: item.user_id,
        id: item.id,
        perm_type: +event.target.value,
      });
      // this.addPerm(ev, item);
    },
  },
};
</script>

<style scoped lang="scss">
.delete-member {
  font-size: 0.8rem;
  color: rgb(189, 61, 87);
}
.alert {
  margin-bottom: 0.5rem;
}
%unread-box {
  display: flex;
  align-items: center;

  .btn {
    padding: 0 0.2em;
    margin: 0;
    color: #888;
    color: #888;

    &:hover {
      background-color: #ddd;
    }

    &:not(:last-child) {
      margin-left: 0.2em;
    }

    svg {
      font-size: 0.7rem;
    }
  }
}
.user-search-list {
  // max-width: 25em;
  .search-filter {
    display: flex;
    flex-direction: row-reverse;
    // position: absolute;
    z-index: 999;
    // top: 24px;
    // background-color: #fff;
    width: 100%;
    justify-content: center;
    // background-color: red;
    .input-group {
      border-radius: 1.6em;
      border: 1px solid #eee;
    }

    .input-group-text {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      font-size: 0.8rem;
      // border: 1px solid #ddd;
    }

    .input-group-append {
      .tavasi {
        display: flex;
        align-items: center;
        padding: 0.4em;
      }

      .input-group-text {
        // border-top-right-radius: 0.5em;
        // border-bottom-right-radius: 0.5em;
        // background-color: transparent;
      }
    }
    .input-group-prepend {
      position: relative;
      .clear-search {
        position: absolute;
        right: -3em;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
      }
      .input-group-text {
        // background-color: transparent;
        // border-top-left-radius: 0.5em;
        // border-bottom-left-radius: 0.5em;
      }
    }

    .form-control {
      height: 2.5em;
      border-color: transparent;
      border-radius: 2.5em;
      &::-webkit-search-decoration,
      &::-webkit-search-cancel-button,
      &::-webkit-search-results-button,
      &::-webkit-search-results-decoration {
        -webkit-appearance: none;
      }
    }

    .close-search {
      color: #7f8891;
    }
  }

  .user-list {
    height: calc(100dvh - 18em);
    overflow-y: auto;

    .group-item {
      .group-row {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.3em;
        flex: 1;

        &.enable-hover:hover {
          .group-picture-container {
            // .context-menu-dropdown {
            //   display: flex;
            // }
            // .group-picture {
            //   display: none;
            // }
          }
          .group-content {
            background-color: #f0f0f0;
          }
        }

        .group-picture-container {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;

          // margin-left: 0.5em;

          border: 1px solid #ccc;
          width: 2.3em;
          height: 2.3em;
          position: relative;
          background-color: #fff;

          .context-menu-dropdown {
            display: none;
          }
          .group-picture {
            object-fit: cover;
            object-position: center;
            overflow: hidden;
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
        }

        .group-content {
          flex: 1;
          border-radius: 0;
          position: relative;
          padding: 0.3em;

          &:active,
          &.active {
            background-color: #d8f8fd;
          }

          .group-title-container {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            label {
              color: #6f6f6f;
            }
          }

          .group-description-container {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .group-unread-indicator {
              font-size: 0.7rem;
              background-color: #00b6e3;
              font-family: "sahel-light";
              display: flex;
              justify-content: center;
              align-items: center;
              padding-top: 0.4em;
            }
            .group-description {
              color: #6f6f6f;
              font-size: 0.8em;
              margin: 0;
              flex: 1;
              text-align: right;
              // @include textOverflow(15em);
            }
          }

          .unread-button {
            .unread-message-label {
              font-size: 0.7rem;
              color: #6f6f6f;
              margin-left: 0.3em;
              line-height: 1;
            }

            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 0.2em;
            font-size: 0.9rem;
            line-height: 1.2;
          }
        }

        &.lobbies {
          padding-right: 1.5em;

          &.has-indicator::after {
            left: auto;
            right: 0em;
          }
        }
      }

      .card-header {
        display: flex;
        align-items: center;

        .group-description-container .group-description {
          max-width: 11em !important;
        }
      }

      .unreads-box {
        @extend %unread-box;
      }

      &.unReads:hover {
        cursor: pointer;
      }

      &:hover {
        .unreads-box {
          box-shadow: 0px 0px 5px 2px #ebebeb;
          border-radius: 1em;
        }
      }
    }
  }
}
</style>
