<template>
    <div class="actors">
        <nav class="filter">
            <ul class="genders nolist">
                <li class="gender">
                    <router-link
                        :to="{ name: 'actors', params: { gender: 'female', letter } }"
                        :class="{ selected: gender === 'female' }"
                        class="gender-link female"
                    ><Gender gender="female" /></router-link>
                </li>
                <li class="gender">
                    <router-link
                        :to="{ name: 'actors', params: { gender: 'male', letter } }"
                        :class="{ selected: gender === 'male' }"
                        class="gender-link male"
                    ><Gender gender="male" /></router-link>
                </li>
                <li class="gender">
                    <router-link
                        :to="{ name: 'actors', params: { gender: 'trans', letter } }"
                        :class="{ selected: gender === 'trans' }"
                        class="gender-link transsexual"
                    ><Gender gender="transsexual" /></router-link>
                </li>
                <li class="gender">
                    <router-link
                        :to="{ name: 'actors', params: { gender: 'other', letter } }"
                        :class="{ selected: gender === 'other' }"
                        class="gender-link other"
                    ><Icon icon="question5" /></router-link>
                </li>
            </ul>

            <ul class="letters nolist">
                <li
                    v-for="letterX in letters"
                    :key="letterX"
                    class="letter"
                >
                    <router-link
                        :to="{ name: 'actors', params: { gender, letter: letterX } }"
                        :class="{ selected: letterX === letter }"
                        class="letter-link"
                        @click="setLetter(letterX)"
                    >{{ letterX || 'All' }}</router-link>
                </li>
            </ul>
        </nav>

        <div class="tiles">
            <Actor
                v-for="actor in actors"
                :key="`actor-${actor.id}`"
                :actor="actor"
            />
        </div>
    </div>
</template>

<script>
import Actor from '../tile/actor.vue';
import Gender from './gender.vue';

async function fetchActors() {
    const gender = this.gender.replace('trans', 'transsexual');

    this.actors = await this.$store.dispatch('fetchActors', {
        limit: 1000,
        letter: this.letter.replace('all', ''),
        genders: [gender === 'other' ? null : gender],
    });
}

async function setLetter(letter) {
    this.letter = letter;

    await this.fetchActors();
}

async function mounted() {
    this.pageTitle = 'Actors';

    await this.fetchActors();
}

export default {
    components: {
        Actor,
        Gender,
    },
    data() {
        return {
            actors: [],
            pageTitle: null,
            letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
            letter: this.$route.params.letter || 'all',
            gender: this.$route.params.gender || 'female',
        };
    },
    mounted,
    methods: {
        fetchActors,
        setLetter,
    },
};
</script>

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

.gender-link {
    &.selected .gender .icon  {
        fill: var(--text-light);
        filter: none;
    }

    &:hover:not(.selected) .gender .icon  {
        fill: var(--text-light);
    }

    &:hover:not(.selected) .transsexual .icon  {
        fill: var(--female);
        filter: drop-shadow(1px 0 0 var(--text-light)) drop-shadow(-1px 0 0 var(--text-light)) drop-shadow(0 1px 0 var(--text-light)) drop-shadow(0 -1px 0 var(--text-light)) drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
    }
}
</style>

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

.actors {
    display: flex;
    flex-direction: column;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, 10rem);
    grid-gap: 0 .5rem;
    padding: 1rem;
    flex-grow: 1;
}

.filter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    margin: 1rem 0;
}

.genders {
    display: flex;
    flex-shrink: 0;
    padding: 0 .5rem 0 0;
    border-right: solid 1px var(--shadow-hint);
    margin: 0 1rem 0 0;
}

.letter,
.gender {
    display: inline-block;
}

.letter-link,
.gender-link {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: .25rem .5rem .25rem 0;
    color: var(--shadow);
    background: var(--background);
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 3px var(--darken-weak);

    .male,
    .female,
    .transsexual {
        padding: .2rem 0 0 0;
    }

    .icon {
        fill: var(--shadow);
    }

    &:hover {
        color: var(--text-light);
        cursor: pointer;

        .icon {
            fill: var(--text-light);
        }
    }

    &.selected {
        background: var(--primary);
        color: var(--text-light);

        &.other .icon {
            fill: var(--text-light);
        }
    }
}

@media(max-width: $breakpoint) {
    .tiles {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }

    .genders {
        flex-direction: column;
    }
}
</style>