<template>
    <div class="filters-bar noselect">
        <Icon icon="filter" />

        <ul class="filters">
            <li
                v-tooltip.bottom="'Not yet available'"
                class="filter"
            >
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('straight') }"
                >
                    <input
                        v-model="localFilter"
                        value="straight"
                        type="checkbox"
                        class="check"
                        disabled
                        @change="$emit('set-filter', localFilter)"
                    >straight
                </label>
            </li>

            <li class="filter">
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('lesbian') }"
                >
                    <input
                        v-model="localFilter"
                        value="lesbian"
                        type="checkbox"
                        class="check"
                        @change="$emit('set-filter', localFilter)"
                    >lesbian
                </label>
            </li>

            <li class="filter">
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('gay') }"
                >
                    <input
                        v-model="localFilter"
                        value="gay"
                        type="checkbox"
                        class="check"
                        @change="$emit('set-filter', localFilter)"
                    >gay
                </label>
            </li>

            <li class="filter">
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('transsexual') }"
                >
                    <input
                        v-model="localFilter"
                        value="transsexual"
                        type="checkbox"
                        class="check"
                        @change="$emit('set-filter', localFilter)"
                    >trans
                </label>
            </li>
        </ul>

        <ul class="filters">
            <li class="filter">
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('anal') }"
                >
                    <input
                        v-model="localFilter"
                        value="anal"
                        type="checkbox"
                        class="check"
                        @change="$emit('set-filter', localFilter)"
                    >anal
                </label>
            </li>
        </ul>

        <ul class="filters">
            <li class="filter">
                <label
                    class="toggle"
                    :class="{ active: !localFilter.includes('femdom') }"
                >
                    <input
                        v-model="localFilter"
                        value="femdom"
                        type="checkbox"
                        class="check"
                        @change="$emit('set-filter', localFilter)"
                    >femdom
                </label>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        filter: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            localFilter: this.filter,
        };
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.filters-bar {
    display: block;
    background: $shadow-hint;
    padding: .5rem 1rem;
    font-size: 0;

    .icon {
        fill: $shadow;
    }
}

.filters {
    display: inline-block;
    list-style: none;
    padding: .5rem;
    margin: 0;

    &:not(:last-child) {
        border-right: solid 1px $shadow-weak;
    }
}

.filter {
    display: inline-block;
}

.toggle {
    color: $shadow;
    background: $shadow-hint;
    box-sizing: border-box;
    padding: .5rem;
    margin: 0 .25rem;
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: bold;
    cursor: pointer;

    .check {
        display: none;
    }

    &.active {
        color: $text-contrast;
        background: $primary;
    }
}
</style>
