<template>
    <div class="list-item" :class="{ checked: isChecked }">
        <label>
            <div>
                <input
                    v-bind:type="type"
                    v-model="selected"
                    name="item"
                    v-bind:id="item"
                    v-bind:value="setValueByType(item, type)"
                />
            </div>

            <suggestion-person
                v-if="item.result.type === 'person'"
                v-bind:item="item"
            >
            </suggestion-person>

            <suggestion-third-party
                v-if="item.result.type === 'thirdparty'"
                @newPriorSuggestion="newPriorSuggestion"
                v-bind:item="item"
            >
            </suggestion-third-party>

            <suggestion-user
                v-if="item.result.type === 'user'"
                v-bind:item="item"
            >
            </suggestion-user>

            <suggestion-user-group
                v-if="item.result.type === 'user_group'"
                v-bind:item="item"
            >
                ></suggestion-user-group
            >

            <suggestion-household
                v-if="item.result.type === 'household'"
                v-bind:item="item"
            >
            </suggestion-household>
        </label>
    </div>
</template>

<script>
import SuggestionPerson from "./TypePerson";
import SuggestionThirdParty from "./TypeThirdParty";
import SuggestionUser from "./TypeUser";
import SuggestionHousehold from "./TypeHousehold";
import SuggestionUserGroup from "./TypeUserGroup";

export default {
    name: "PersonSuggestion",
    components: {
        SuggestionPerson,
        SuggestionThirdParty,
        SuggestionUser,
        SuggestionHousehold,
        SuggestionUserGroup,
    },
    props: ["item", "search", "type"],
    emits: ["updateSelected", "newPriorSuggestion"],
    computed: {
        selected: {
            set(value) {
                //console.log('value', value);
                this.$emit("updateSelected", value);
            },
            get() {
                return this.search.selected;
            },
        },
        isChecked() {
            return this.search.selected.indexOf(this.item) === -1
                ? false
                : true;
        },
    },
    methods: {
        setValueByType(value, type) {
            return type === "radio" ? [value] : value;
        },
        newPriorSuggestion(response) {
            this.$emit("newPriorSuggestion", response);
        },
    },
};
</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>
