/*
 * Copyright 2026 Element Creations Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

import { CheckboxMenuItem, IconButton, Menu, MenuTitle, RadioMenuItem } from "@vector-im/compound-web";
import React, { type JSX, useState } from "react";
import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";

import { type RoomListHeaderViewModel } from "../RoomListHeaderView";
import { useViewModel } from "../../../core/viewmodel";
import { useI18n } from "../../../core/i18n/i18nContext";
import styles from "./OptionMenuView.module.css";

interface OptionMenuViewProps {
    /**
     * The view model for the room list header
     */
    vm: RoomListHeaderViewModel;
}

/**
 * A menu component that provides sorting options for the room list.
 * Displays a dropdown menu with radio buttons to sort rooms by activity or alphabetically.
 *
 * @example
 * ```tsx
 * <OptionMenuView vm={roomListHeaderViewModel} />
 * ```
 */
export function OptionMenuView({ vm }: OptionMenuViewProps): JSX.Element {
    const { translate: _t } = useI18n();
    const [open, setOpen] = useState(false);
    const { activeSortOption, isMessagePreviewEnabled } = useViewModel(vm);

    return (
        <Menu
            open={open}
            onOpenChange={setOpen}
            title={_t("room_list|room_options")}
            showTitle={false}
            align="start"
            trigger={
                <IconButton
                    tooltip={_t("room_list|room_options")}
                    aria-label={_t("room_list|room_options")}
                    // 28px icon with a 20px icon
                    size="28px"
                    style={{ padding: "4px" }}
                >
                    <OverflowHorizontalIcon />
                </IconButton>
            }
        >
            <MenuTitle title={_t("room_list|sort")} className={styles.title} />
            <RadioMenuItem
                label={_t("room_list|sort_type|activity")}
                checked={activeSortOption === "recent"}
                onSelect={() => vm.sort("recent")}
            />
            <RadioMenuItem
                label={_t("room_list|sort_type|unread_first")}
                checked={activeSortOption === "unread-first"}
                onSelect={() => vm.sort("unread-first")}
            />
            <RadioMenuItem
                label={_t("room_list|sort_type|atoz")}
                checked={activeSortOption === "alphabetical"}
                onSelect={() => vm.sort("alphabetical")}
            />
            <MenuTitle title={_t("room_list|appearance")} />
            <CheckboxMenuItem
                label={_t("room_list|show_message_previews")}
                onSelect={vm.toggleMessagePreview}
                checked={isMessagePreviewEnabled}
            />
        </Menu>
    );
}
