<template>
    <v-hover v-slot="{hover}">
        <th
            :style="header.htmlStyle"
            :class="header.htmlClass"
        >
            <v-sheet
                tile
                color="transparent"
                :width="header.width"
                class="d-flex justify-start"
                
            >
                <div
                    :title="__(header.text)"
                    :style="{
                        width: 'calc(100% - ' + (header.sortable ? (header.isFilterable ? '54' : '36') : '0') + 'px)'
                    }"
                    class="text-truncate"
                    :class="{
                        'blue--text': hover,
                    }"
                >
                    <span v-html="__(header.text)"></span> 
                </div>

                <template v-if="header.sortable">
                    <div
                        v-if="index"
                        :style="{
                            width: '16px',
                        }"
                    >
                        <v-chip       
                            x-small
                            class="ma-0 px-1"
                            :color="hover ? 'blue': null"
                            outlined
                            @click="OnSortClick"
                        >
                            {{index}}
                        </v-chip>
                    </div>
                
                    <div 
                        v-if="true || hover"
                        :style="{
                            width: '20px'
                        }"
                    >
                        <v-btn
                            x-small
                            icon
                            :title="__(option.title)"
                            :color="hover ? 'blue': null"
                            @click="OnSortClick"
                        >
                            <v-icon> {{ option.icon }} </v-icon>
                        </v-btn>
                    </div>
                </template>

                <template v-if="header.isFilterable">
                    <v-menu
                        v-model="filterMenuVisible" 
                        :close-on-content-click="false"
                        offset-y
                    >
                        <template v-slot:activator="{ on, attrs }">
                            <v-btn
                                v-bind="attrs"
                                v-on="on"
                                x-small
                                icon
                                :title="filterMenuVisible ? null : __('Filtrează după coloană')"
                                :color="hover ? 'blue' : null"
                            >
                                <v-icon>mdi-filter</v-icon>
                            </v-btn>
                        </template>

                        <cs-header-filter-form 
                            :control="header.filterable.control"
                            @cancel="filterMenuVisible = false"
                        />
                    </v-menu>
                </template>
            </v-sheet>
        </th>
    </v-hover>
</template>

<script>
    export default {
        props: {
            header: {required: true},

            /**
             * element din arrayul de sortare
             */
            sort: {default: null},
        },

        data: () => ({
            filterMenuVisible: false
        }),

        computed: {
            index() {
                return this.sort ? this.sort.index : null;
            },

            direction() {
                return this.sort ? this.sort.item.direction : null;
            },

            sortoptions() {
                return {
                    null: {
                        icon: 'mdi-sort-ascending',
                        direction: 'asc',
                        title: 'Ordonează crescător',
                    },

                    asc: {
                        icon:  'mdi-sort-descending',
                        direction: 'desc',
                        title: 'Ordonează descrescător',
                    },

                    desc: {
                        icon: 'mdi-close',
                        direction: 'null',
                        title: 'Anulează ordonarea',
                    }
                }
            },

            option() {
                return this.sortoptions[this.direction];
            },
        },

        methods: {
            OnSortClick() {
                this.$emit('click:sortcolumn',  {
                    direction: this.option.direction,
                    sort_column: this.header.sort_column,
                    field: this.header.value,
                });
            },
        },

        components: {
            CsHeaderFilterForm: require('./filter/CsHeaderFilterForm').default,
        },

        name: 'CsHeaderCell',
    }
</script>