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

        <MagAvatars :userIds="userList" />
    </XColumn>
</template>

<script lang="ts" setup>
import XColumn from "./column.vue";
import { Column, updateColumn } from "./deck-store";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { onMounted, ref, watch } from "vue";
import { User } from "calckey-js/built/entities";
import MagAvatars from "@/components/MagAvatars.vue";

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

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

const userList = ref<User["id"][]>([]);

async function fetchUserList(id: string | null) {
    if (id === null) {
        userList.value = [];
        return;
    }

    userList.value = (
        await os.api("users/lists/show", {
            listId: id,
        })
    ).userIds;
}

onMounted(async () => {
    watch(
        () => props.column.listId,
        (id) => fetchUserList(id ?? null),
    );

    await fetchUserList(props.column.listId ?? null);
});

if (props.column.listId == null) {
    setList();
}

async function setList() {
    const lists = await os.api("users/lists/list");
    const { canceled, result: list } = await os.select({
        title: i18n.ts.selectList,
        items: lists.map((x) => ({
            value: x,
            text: x.name,
        })),
        default: props.column.listId,
    });
    if (canceled) return;
    updateColumn(props.column.id, {
        name: list.name,
        listId: list.id,
    });
}

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

<style lang="scss" scoped></style>
