<template>
    <v-bottom-sheet class="overlayDialog" v-model="isActive">
        <v-card>
            <v-container fluid>
                <v-layout row wrap>
                    <ReportTile v-for="(item, type) in REPORT_TYPES" :type="type" :imageSrc="item.image" :label="$t(item.label)" :save="saveReport" :key="type"></ReportTile>
                </v-layout>
            </v-container>
        </v-card>
    </v-bottom-sheet>
</template>

<script>
import { REPORT_TYPES } from '@/constants';

import ReportTile from './ReportTile.vue';

export default {
    components: {
        ReportTile,
    },
    props: {
        value: Boolean,
        lat: Number,
        lng: Number,
    },
    computed: {
        isActive: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    data() {
        return {
            REPORT_TYPES,
        };
    },
    methods: {
        saveReport(type) {
            return this.$store.dispatch('saveReport', {
                type,
                lat: this.lat,
                lng: this.lng,
            })
                .then(() => {
                    this.isActive = !this.isActive;
                });
        },
    },
};
</script>

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