<template>
    <XColumn
        :column="column"
        :is-stacked="isStacked"
        :menu="menu"
        @parent-focus="($event) => emit('parent-focus', $event)"
    >
        <template #header
            ><i class="ph-bell ph-bold ph-lg" style="margin-right: 8px"></i
            >{{ column.name }}</template
        >

        <XNotifications :include-types="includingTypes" />
    </XColumn>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, ref } from "vue";
import XColumn from "./column.vue";
import type { Column } from "./deck-store";
import { updateColumn } from "./deck-store";
import XNotifications from "@/components/MagNotifications.vue";
import * as os from "@/os";
import { i18n } from "@/i18n";
import MagNotificationSettingsWindow from "@/components/MagNotificationSettingsWindow.vue";
import { types } from "magnetar-common";

const props = defineProps<{
    column: Column;
    isStacked: boolean;
}>();

const emit = defineEmits<{
    (ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
}>();

const includingTypes = ref<types.NotificationType[] | undefined>(
    props.column.includingTypes,
);

function func(): void {
    os.popup<typeof MagNotificationSettingsWindow>(
        defineAsyncComponent(
            () => import("@/components/MagNotificationSettingsWindow.vue"),
        ),
        {
            includingTypes: props.column.includingTypes,
        },
        {
            done: async ({ includingTypes: notifTypes }) => {
                updateColumn(props.column.id, {
                    includingTypes: notifTypes ?? undefined,
                });
                includingTypes.value = notifTypes ?? undefined;
            },
        },
        "closed",
    );
}

const menu = [
    {
        icon: "ph-pencil ph-bold ph-lg",
        text: i18n.ts.notificationSetting,
        action: func,
    },
];
</script>
