<template>
    <div>
        <Alert
            type="error"
            :text="$t('reportDialog.unableToSend')"
            :onDismiss="dismissError"
            v-if="hasError"
            ></Alert>
        <v-bottom-sheet v-model="isActive" id="reportCardSheet">
            <v-card>
                <v-container fluid>
                    <v-layout row wrap>
                        <ReportTile
                            v-for="type in REPORT_TYPES_ORDER"
                            :type="type"
                            :imageSrc="REPORT_TYPES[type].image"
                            :label="$t(REPORT_TYPES[type].label)"
                            :save="saveReport"
                            :key="type"
                            >
                        </ReportTile>
                    </v-layout>
                </v-container>
            </v-card>
        </v-bottom-sheet>
    </div>
</template>

<script>
import { REPORT_TYPES_ORDER } from '@/constants';
import REPORT_TYPES from '@/report-types';

import Alert from '@/components/Alert.vue';
import ReportTile from './ReportTile.vue';

export default {
    beforeDestroy() {
        window.removeEventListener('keydown', this.hideReportDialogOnEsc);
    },
    components: {
        Alert,
        ReportTile,
    },
    computed: {
        isActive: {
            get() {
                return this.value;
            },
            set(val) {
                if (val === false) {
                    this.onHide();
                }
                this.$emit('input', val);
            },
        },
    },
    data() {
        return {
            hasError: false,
            REPORT_TYPES,
            REPORT_TYPES_ORDER,
        };
    },
    methods: {
        dismissError() {
            this.hasError = false;
        },
        hideReportDialogOnEsc(event) {
            let isEscape = false;
            if ('key' in event) {
                isEscape = (event.key === 'Escape' || event.key === 'Esc');
            } else {
                isEscape = (event.keyCode === 27);
            }
            if (isEscape) {
                this.isActive = false;
            }
        },
        saveReport(type) {
            this.isActive = false;
            const report = {
                type,
                lat: this.latLng[0],
                lng: this.latLng[1],
            };
            return this.$store.dispatch('saveReport', report)
                .catch((exc) => {
                    console.error(exc);
                    this.hasError = true;
                    this.$store.dispatch('saveUnsentReport', { report });
                });
        },
    },
    mounted() {
        window.addEventListener('keydown', this.hideReportDialogOnEsc);
    },
    props: {
        value: Boolean,
        latLng: Array,
        onHide: Function,
    },
};
</script>

<style scoped>
.overlayDialog {
    z-index: 1003 !important;
}
</style>

<style>
.dialog__content {
    z-index: 1002 !important;
}
</style>
