<template>
  <div class="list-item" :class="{ checked: props.isSelected }">
    <label>
      <input
        :type="type"
        :value="props.item.key"
        name="item"
        :id="props.item.key"
        :checked="props.isSelected"
        @click="onUpdateValue"
      />

      <suggestion-person
        v-if="isSuggestionForPerson(item)"
        :item="item"
      ></suggestion-person>

      <suggestion-third-party
        v-if="isSuggestionForThirdParty(item)"
        @trigger-add-contact="triggerAddContact"
        :item="item"
      ></suggestion-third-party>

      <suggestion-user
        v-if="isSuggestionForUser(item)"
        :item="item"
      ></suggestion-user>

      <suggestion-user-group
        v-if="isSuggestionForUserGroup(item)"
        :item="item"
      ></suggestion-user-group>

      <suggestion-household
        v-if="isSuggestionForHousehold(item)"
        :item="item"
      ></suggestion-household>
    </label>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

// Components
import SuggestionPerson from "./TypePerson.vue";
import SuggestionThirdParty from "./TypeThirdParty.vue";
import SuggestionUser from "./TypeUser.vue";
import SuggestionHousehold from "./TypeHousehold.vue";
import SuggestionUserGroup from "./TypeUserGroup.vue";

// Types
import {
  isSuggestionForHousehold,
  isSuggestionForPerson,
  isSuggestionForThirdParty,
  isSuggestionForUser,
  isSuggestionForUserGroup,
  Suggestion,
} from "ChillPersonAssets/types";
import { ThirdpartyCompany } from "../../../../../../ChillThirdPartyBundle/Resources/public/types";

const props = defineProps<{
  item: Suggestion;
  isSelected: boolean;
  type: "radio" | "checkbox";
}>();
const emit = defineEmits<{
  (
    e: "updateSelected",
    payload: { suggestion: Suggestion; isSelected: boolean },
  ): void;
  (e: "triggerAddContact", payload: { parent: ThirdpartyCompany }): void;
}>();

const isChecked = computed<boolean>(() => props.isSelected);

const onUpdateValue = (event: Event) => {
  const target = event?.target;
  if (!(target instanceof HTMLInputElement)) {
    console.error("the value of checked is not an HTMLInputElement");
    return;
  }
  emit("updateSelected", {
    suggestion: props.item,
    isSelected: props.type === "radio" ? true : target.checked,
  });
};

function triggerAddContact(payload: { parent: ThirdpartyCompany }) {
  emit("triggerAddContact", payload);
}
</script>

<style lang="scss">
div.results {
  div.list-item {
    padding: 0.4em 0.8em;
    display: flex;
    flex-direction: row;
    &.checked {
      background-color: #ececec;
      border-bottom: 1px dotted #8b8b8b;
    }
    label {
      display: inline-flex;
      width: 100%;
      div.container:not(.household) {
        & > input {
          margin-right: 0.8em;
        }
        > span:not(.name) {
          margin-left: 0.5em;
          opacity: 0.5;
          font-size: 90%;
          font-style: italic;
        }
      }
      div.right_actions {
        margin: 0 0 0 auto;
        display: flex;
        align-items: flex-end;
        & > * {
          margin-left: 0.5em;
          align-self: baseline;
        }

        a.btn {
          border: 1px solid lightgrey;
          font-size: 70%;
          padding: 4px;
        }
      }
    }
  }
}
</style>
