<template>
    <div>
        <div class="input-group mb-3">
            <button class="btn btn-outline-primary" @click.prevent="detect">
                <Icon v="location" />
                <T>profile.timezone.detect</T>
            </button>
            <AutocompleteSelect v-model="timezone" :options="timezones" :placeholder="$t('profile.timezone.placeholder')"/>
            <button v-if="timezone" class="btn btn-outline-danger" type="button" @click="timezone = null">
                <Icon v="times" />
            </button>
        </div>
        <div v-if="timezoneInfo">
            <div class="form-check form-switch my-2">
                <label>
                    <input v-model="publishArea" class="form-check-input" type="checkbox">
                    <T>profile.timezone.publishArea</T><T>quotation.colon</T>
                    <br class="d-md-none">
                    <strong>
                        <Icon :v="timezoneInfo.icon" />
                        <T>profile.timezone.areas.{{ timezoneInfo.area }}</T>
                    </strong>
                </label>
            </div>

            <div class="form-check form-switch my-2">
                <label>
                    <input v-model="publishLocation" class="form-check-input" type="checkbox">
                    <T>profile.timezone.publishLocation</T><T>quotation.colon</T>
                    <br class="d-md-none">
                    <strong>
                        <Icon v="map-marked-alt" />
                        {{ timezoneInfo.displayLocation }}
                    </strong>
                </label>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import timezone from '../plugins/timezone.ts';
import type { Timezone } from '../src/profile.ts';
import type { PropType } from 'vue';

interface Data {
    timezones: Record<string, string>;
    timezone: string | null;
    publishArea: boolean;
    publishLocation: boolean;
}

export default timezone.extend({
    props: {
        value: { type: Object as PropType<Timezone> },
    },
    data(): Data {
        return {
            timezones: {},
            timezone: this.value?.tz,
            publishArea: !!this.value?.area,
            publishLocation: !!this.value?.loc,
        };
    },
    computed: {
        timezoneInfo() {
            return this.getTimezoneInfo(this.timezone);
        },
    },
    watch: {
        timezone() {
            this.update();
        },
        publishArea() {
            this.update();
        },
        publishLocation() {
            this.update();
        },
    },
    mounted() {
        for (const tz of Intl.supportedValuesOf('timeZone')) {
            this.timezones[tz] = this.timezoneDisplayName(tz);
        }
    },
    methods: {
        detect(): void {
            this.timezone = this.detectBrowserTimezone();
        },
        update(): void {
            this.$emit('input', this.timezone
                ? {
                    tz: this.timezone,
                    area: this.publishArea,
                    loc: this.publishLocation,
                }
                : null);
        },
    },
});
</script>

<style lang="scss" scoped>
.select {
    position: relative;
    .list-group {
        position: absolute;
        top: 100%;
        max-height: 300px;
        overflow-y: auto;
        z-index: 999;
    }
}
</style>
