<template>
  <div :style="style" class="calendar-active">
    <span class="badge-user">
      {{ user.text }}
      <template v-if="invite !== null">
        <i v-if="invite.status === 'accepted'" class="fa fa-check" />
        <i v-else-if="invite.status === 'declined'" class="fa fa-times" />
        <i v-else-if="invite.status === 'pending'" class="fa fa-question-o" />
        <i v-else-if="invite.status === 'tentative'" class="fa fa-question" />
        <span v-else="">{{ invite.status }}</span>
      </template>
    </span>
    <span class="form-check-inline form-switch">
      <input
        class="form-check-input"
        type="checkbox"
        id="flexSwitchCheckDefault"
        v-model="rangeShow"
      />
      &nbsp;<label
        class="form-check-label"
        for="flexSwitchCheckDefault"
        title="Disponibilités"
        ><i class="fa fa-calendar-check-o"
      /></label>
    </span>
    <span class="form-check-inline form-switch">
      <input
        class="form-check-input"
        type="checkbox"
        id="flexSwitchCheckDefault"
        v-model="remoteShow"
      />
      &nbsp;<label
        class="form-check-label"
        for="flexSwitchCheckDefault"
        title="Agenda"
        ><i class="fa fa-calendar"
      /></label>
    </span>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "CalendarActive",
  props: {
    user: {
      type: Object,
      required: true,
    },
    invite: {
      type: Object,
      required: false,
      default: null,
    },
  },
  computed: {
    style() {
      return {
        backgroundColor: this.$store.getters.getUserData(this.user).mainColor,
      };
    },
    rangeShow: {
      set(value) {
        this.$store.commit("showUserOnCalendar", {
          user: this.user,
          ranges: value,
        });
      },
      get() {
        return this.$store.getters.isRangeShownOnCalendarForUser(this.user);
      },
    },
    remoteShow: {
      set(value) {
        this.$store.commit("showUserOnCalendar", {
          user: this.user,
          remotes: value,
        });
      },
      get() {
        return this.$store.getters.isRemoteShownOnCalendarForUser(this.user);
      },
    },
  },
};
</script>

<style scoped lang="scss">
.calendar-active {
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.5rem;

  border-radius: 0.5rem;

  color: var(--bs-blue);

  & > .badge-user {
    margin-right: 0.5rem;
  }
}
</style>
