<template>
    <DocSectionText v-bind="$attrs">
        <p>Here is the full list of PrimeIcons. More icons will be added periodically and you may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
    </DocSectionText>

    <InputText v-model="filter" class="w-full p-3 mt-3 mb-4" placeholder="Search an icon" />

    <div class="card">
        <div class="grid text-center">
            <div v-for="icon of filteredIcons" :key="icon.properties.name" class="col-12 md:col-2 mb-5">
                <i :class="'text-2xl mb-3 text-color-secondary pi pi-' + icon.properties.name"></i>
                <div>pi-{{ icon.properties.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { IconService } from '@/service/IconService';

export default {
    data() {
        return {
            icons: null,
            filter: null
        };
    },
    mounted() {
        IconService.getIcons().then((data) => {
            let d_data = data;
            let d_icons = d_data.filter((value) => {
                return value.icon.tags.indexOf('deprecate') === -1;
            });

            d_icons.sort((icon1, icon2) => {
                if (icon1.properties.name < icon2.properties.name) return -1;
                else if (icon1.properties.name < icon2.properties.name) return 1;
                else return 0;
            });

            this.icons = d_icons;
        });
    },
    computed: {
        filteredIcons() {
            if (this.filter) return this.icons.filter((icon) => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1);
            else return this.icons;
        }
    }
};
</script>
