<template>
  <div class="vue-component">
    <h2>
      <a id="section-20" />
      {{ $t("courselocation.title") }}
    </h2>

    <div
      v-for="error in displayErrors"
      class="alert alert-danger my-2"
      :key="error"
    >
      {{ error }}
    </div>

    <div v-if="hasNoLocation">
      <label class="chill-no-data-statement">
        {{ $t("courselocation.no_address") }}
      </label>
    </div>

    <div class="flex-table" v-if="accompanyingCourse.location">
      <div class="item-bloc">
        <address-render-box :address="accompanyingCourse.location" />

        <div v-if="isPersonLocation" class="alert alert-secondary separator">
          <label class="col-form-label">
            {{
              $t("courselocation.person_locator", [
                accompanyingCourse.personLocation.text,
              ])
            }}
          </label>
        </div>

        <div v-if="isTemporaryAddress" class="alert alert-warning separator">
          <p>
            {{ $t("courselocation.temporary_address_must_be_changed") }}
            <i class="fa fa-fw fa-map-marker" />
          </p>
        </div>
      </div>
    </div>

    <div
      v-if="hasNoPersonLocation"
      class="alert alert-danger no-person-location"
    >
      <i class="fa fa-warning fa-2x" />
      <div>
        <p>
          {{
            $t(
              "courselocation.associate_at_least_one_person_with_one_household_with_address",
            )
          }}
          <a href="#section-10">
            <i class="fa fa-level-up fa-fw" />
          </a>
        </p>
      </div>
    </div>

    <div>
      <ul class="record_actions">
        <li>
          <add-address
            v-if="!isPersonLocation"
            :key="key"
            :context="context"
            :options="options"
            :address-changed-callback="submitTemporaryAddress"
            ref="addAddress"
          />
        </li>
      </ul>
    </div>

    <div v-if="!isLocationValid" class="alert alert-warning to-confirm">
      {{ $t("courselocation.not_valid") }}
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";

export default {
  name: "CourseLocation",
  components: {
    AddAddress,
    AddressRenderBox,
  },
  data() {
    return {
      addAddress: {
        options: {
          button: {
            text: {
              create: "courselocation.add_temporary_address",
              edit: "courselocation.edit_temporary_address",
            },
          },
          title: {
            create: "courselocation.add_temporary_address",
            edit: "courselocation.edit_temporary_address",
          },
          onlyButton: true,
        },
      },
    };
  },
  computed: {
    ...mapState({
      accompanyingCourse: (state) => state.accompanyingCourse,
      context: (state) => state.addressContext,
    }),
    ...mapGetters(["isLocationValid"]),
    options() {
      return this.addAddress.options;
    },
    key() {
      return this.context.edit
        ? "address_" + this.context.addressId
        : this.accompanyingCourse.type + "_" + this.accompanyingCourse.id;
    },
    isTemporaryAddress() {
      return this.accompanyingCourse.locationStatus === "address";
    },
    isPersonLocation() {
      return this.accompanyingCourse.locationStatus === "person";
    },
    hasNoLocation() {
      return this.accompanyingCourse.locationStatus === "none";
    },
    currentParticipations() {
      return this.accompanyingCourse.participations.filter(
        (p) => p.enddate !== null,
      );
    },
    hasNoPersonLocation() {
      let addressInParticipations_ = [];
      this.currentParticipations.forEach((p) => {
        addressInParticipations_.push(
          this.checkHouseholdAddressForParticipation(p),
        );
      });

      const booleanReducer = (previousValue, currentValue) =>
        previousValue || currentValue;

      let addressInParticipations =
        addressInParticipations_.length > 0
          ? addressInParticipations_.reduce(booleanReducer)
          : false;

      //console.log(addressInParticipations_, addressInParticipations);
      return (
        this.accompanyingCourse.step !== "DRAFT" &&
        this.isTemporaryAddress &&
        !addressInParticipations
      );
    },
    isContextEdit() {
      return this.context.edit;
    },
  },
  methods: {
    checkHouseholdAddressForParticipation(participation) {
      if (participation.person.current_household_id === null) {
        return false;
      }
      return participation.person.current_household_address !== null;
    },
    initAddressContext() {
      let context = {
        target: {
          name: this.accompanyingCourse.type,
          id: this.accompanyingCourse.id,
        },
        edit: false,
        addressId: null,
        defaults: window.addaddress,
      };
      if (this.accompanyingCourse.location) {
        context["edit"] = true;
        context["addressId"] = this.accompanyingCourse.location.address_id;
      }
      this.$store.commit("setAddressContext", context);
    },
    displayErrors() {
      return this.$refs.addAddress.errorMsg;
    },
    submitTemporaryAddress(payload) {
      //console.log('@@@ click on Submit Temporary Address Button', payload);
      payload["locationStatusTo"] = "address"; // <== temporary, not none, not person
      this.$store
        .dispatch("updateLocation", payload)
        .catch(({ name, violations }) => {
          if (name === "ValidationException" || name === "AccessException") {
            violations.forEach((violation) =>
              this.$toast.open({ message: violation }),
            );
          } else {
            this.$toast.open({ message: "An error occurred" });
          }
        });

      this.$store.commit("setEditContextTrue", payload);
    },
  },
  created() {
    this.initAddressContext();

    //console.log('ac.locationStatus', this.accompanyingCourse.locationStatus);
    //console.log('ac.location (temporary location)', this.accompanyingCourse.location);
    //console.log('ac.personLocation', this.accompanyingCourse.personLocation);
  },
};
</script>
<style lang="scss" scoped>
div#accompanying-course {
  div.vue-component {
    & > div.alert.no-person-location {
      margin: 1px 0 0;
    }
    div.no-person-location {
      padding-top: 1.5em;
      display: flex;
      flex-direction: row;
      & > i {
        flex-basis: 1.5em;
        flex-grow: 0;
        flex-shrink: 0;
        padding-top: 0.2em;
        opacity: 0.75;
      }
      & > div {
        flex-basis: auto;
        div.action {
          button.btn-update {
            margin-right: 2em;
          }
        }
      }
    }
    div.flex-table {
      div.item-bloc {
        div.alert {
          margin: 0 -0.9em -1em;
        }
      }
    }
  }
}
</style>
