<template>
    <div>
        <div class="text-grey-dark text-sm"
            :class="{'text-red': error}">{{ placeholder }}</div>
        <div class="mb-2 border-b"
            :class="{'border-grey': !error, 'border-error': error}">
            <div v-if="!hasValue"
                @click="showOptions = true"
                class="text-grey pt-2 pb-3 cursor-pointer">Choose your option</div>
            <div v-else>
                <div v-if="multiple">
                    <div class="text-grey-darkest pt-2 pb-3 cursor-pointer w-full"
                        @click="showOptions = true">
                        <div v-for="(item, index) in selected"
                            class="inline-flex items-center bg-grey-lighter shadow py-1 px-3 mr-2 rounded-full mb-2">
                            <div class="text-sm">{{ item[labelKey] }}</div>
                            <cancel-icon class="text-grey hover:text-grey-darker ml-2 flex-no-shrink"
                                width="18"
                                height="18"
                                @click.native.stop="selected.splice(index, 1)"></cancel-icon>
                        </div>
                    </div>
                </div>
                <div v-else
                    class="flex items-center justify-between">
                    <div class="text-grey-darkest pt-2 pb-3 cursor-pointer w-full"
                        @click="showOptions = true">{{ selected[labelKey] }}</div>
                    <div class="ml-3 flex items-center pt-2 pb-3 cursor-pointer"
                        @click="selected = {}">
                        <cancel-icon class="text-grey hover:text-grey-darker"></cancel-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-red text-sm"
            v-if="error"
            v-html="error"></div>
        <div class="mt-1 text-sm text-grey-dark"
            v-if="helpText"
            v-html="helpText"></div>
        <laragle-modal :show.sync="showOptions">
            <template slot="header">Select {{ placeholder }}</template>
            <template slot="body">
                <!--<app-search v-model="searchQuery"
                    class="mb-3"
                    v-focus="true"
                    custom-class="border border-transparent bg-grey-lighter rounded focus:bg-white focus:border-grey-light focus:border"></app-search>-->
                <div class="overflow-auto"
                    style="max-height: 16rem">
                    <div>
                        <div v-for="option in localOptions">
                            <checkbox class="p-3 hover:bg-grey-lighter"
                                v-model="selected"
                                :alt-value="option"
                                v-if="multiple">{{ option[labelKey] }}</checkbox>
                            <radio class="p-3 hover:bg-grey-lighter"
                                v-model="selected"
                                :alt-value="option"
                                v-else>{{ option[labelKey] }}</radio>
                        </div>
                    </div>
                </div>
            </template>
            <template slot="footer">
                <app-button class="btn-blue"
                    @click="handleDone">Done</app-button>
            </template>
        </laragle-modal>
    </div>
</template>
<script>
    import isEmpty from 'lodash.isempty';
    import find from 'lodash.find';
    import filter from 'lodash.filter';

    export default {
        props: {
            value: null,
            options: {
                type: Array,
                required: true
            },
            multiple: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                required: true
            },
            helpText: {
                type: String,
                default: null
            },
            error: {
                type: String,
                default: null
            },
            valueKey: {
                type: String,
                default: null
            },
            labelKey: {
                type: String,
                default: 'label'
            }
        },
        data() {
            return {
                showOptions: false,
                selected: this.multiple ? [] : {},
                searchQuery: null,
                localOptions: []
            }
        },
        computed: {
            hasValue() {
                if (typeof this.value === 'object') {
                    return !isEmpty(this.value);
                }

                return this.value !== null && this.value !== '';
            }
        },
        watch: {
            selected(value) {
                if (!this.multiple && !isEmpty(this.selected)) {
                    this.handleDone()
                }

                if (isEmpty(value) || this.valueKey === null) {
                    this.$emit('input', value);
                } else {
                    this.$emit('input', value[this.valueKey])
                }

                this.$emit('updated')
            },
            searchQuery(value) {
                this.localOptions = filter(this.options, (option) => {
                    return option[this.labelKey].toLowerCase().includes(value.toLowerCase())
                })
            }
        },
        mounted() {
            this.localOptions = this.options;

            if (this.valueKey && this.value) {
                this.selected = find(this.options, (item) => {
                    return item[this.valueKey] == this.value
                })
            } else {
                this.selected = this.value
            }
        },
        methods: {
            handleDone() {
                this.showOptions = false
            }
        }
    }
</script>