<script lang="ts">
import { faHashtag } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { isDateTime, isNumber, isString } from '../helpers/instances';
import Date from '@/components/headerFilters/Date.vue';
import Number from '@/components/headerFilters/Number.vue';
import Text from '@/components/headerFilters/Text.vue';
import { Options } from '@/components/models/tablemodels';

export default {
    components: {
        Date,
        Number,
        Text,
        FontAwesomeIcon
    },
    props: {
        item: {
            type: Object,
            required: true
        },
        filters: {
            type: Object,
            required: true
        },
        showFilters: {
            type: Boolean,
            required: true
        },
        options: {
            type: Options,
            required: true,
            default: () => new Options()
        },
        prop: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            item: this.item,
            index: this.index,
            filters: this.filters,
            showFilters: this.showFilters,
            key: this.key,
            hashTag: faHashtag,
            isString: isString,
            isNumber: isNumber,
            isDateTime: isDateTime
        }
    },
    watch: {
        key(newVal: any) {
            this.key = newVal;
        },
    },
    methods: {
        filterValue(event: any, filter: any){
            this.$emit('filterValue', event, filter);
        },
        filterDate(event: any, filter: any){
            this.$emit('filterValue', event, filter);
        }
    }
}
</script>
<template>
    <span v-if="prop == options.Key! && options.Active">
        <FontAwesomeIcon :icon="hashTag"></FontAwesomeIcon>
    </span>
    <span v-else>
        <div v-if="isNumber(item[prop])">
            <Number 
                :filter="filters[prop]" 
                :prop="prop":data="filters" 
                @filterValue="filterValue($event, filters[prop])">
            </Number>
        </div>
        <div v-else-if="isDateTime(item[prop])">
            <Date 
                :data="filters" 
                :filter="filters[prop]" 
                :prop="prop" 
                @filterValue="filterDate($event, filters[prop])">
            </Date>
        </div>
        <div v-else-if="isString(item[prop])">
            <Text 
                :data="filters" 
                :filter="filters[prop]"
                :prop="prop" 
                @filterValue="filterValue($event, filters[prop])">
            </Text>
        </div>
    </span>
</template>