---
// Input to select a character,
// e.g. Special Week (not [Special Dreamer] Special Week).

import { character, type Character } from "../data/character";

interface Props {
    id: string;
    label?: string;
    required?: boolean;
    region?: keyof typeof character;
}

export interface Emits {
    "chara-change": (ev: CustomEvent<{id: string, chara?: Character}>) => void;
}

const { id, label, required = false, region = "global" } = Astro.props;
---
{label && <label for="id">{label}</label>}
<select class="select-chara" id={id}>
    {!required && <option value=""></option>}
    {character[region].map((chara) => (
        <option value={chara.chara_id}>{chara.name}</option>
    ))}
</select>
<script is:inline define:vars={{ id, region, character }}>
    document.getElementById(id).addEventListener("change", (ev) => {
        const chara_id = parseInt(ev.target.value);
        const chara = character[region].find((c) => c.chara_id === chara_id);
        const detail = chara != null ? {id, chara} : {id};
        const b = new CustomEvent("chara-change", { detail, bubbles: true });
        ev.target.dispatchEvent(b);
    });
</script>