<template>
    <div class="content">
        <FilterBar
            :filter="filter"
            :range="range"
            @set-filter="setFilter"
            @set-range="setRange"
        />

        <div class="content-inner">
            <ul class="scenes nolist">
                <li
                    v-for="release in releases"
                    :key="release.id"
                    class="scene"
                >
                    <ReleaseTile :release="release" />
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import FilterBar from './filter-bar.vue';
import ReleaseTile from '../tile/release.vue';

import rangeDates from '../../js/range-dates';

async function fetchReleases() {
    this.releases = await this.$store.dispatch('fetchReleases', {
        filter: this.filter,
        ...rangeDates(this.range),
    });
}

async function setFilter(filter) {
    this.filter = filter;
    localStorage.setItem('filter', this.filter);

    await this.fetchReleases();
}

async function setRange(range) {
    this.range = range;
    localStorage.setItem('range', this.range);

    await this.fetchReleases();
}

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

    await this.fetchReleases();
}

export default {
    components: {
        FilterBar,
        ReleaseTile,
    },
    data() {
        const storedFilter = localStorage.getItem('filter');
        const storedRange = localStorage.getItem('range');

        return {
            filter: storedFilter ? storedFilter.split(',') : ['gay', 'transsexual'],
            range: storedRange || 'new',
            releases: [],
            networks: [],
            pageTitle: null,
        };
    },
    mounted,
    methods: {
        fetchReleases,
        setFilter,
        setRange,
    },
};
</script>
