video-flow-b/components/ChatInputBox/PortraitAnimeSelector.tsx

"use client";

import React, { useEffect, useMemo, useState } from 'react';
import { Dropdown } from 'antd';
import { ChevronUp } from 'lucide-react';
import { fetchSettingByCode } from '@/api/serversetting';

export type PortraitAnimeValue = 'portrait' | string;

type DropdownPlacement =
    | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';

export interface PortraitAnimeSelectorProps {
    value: PortraitAnimeValue;
    onChange: (value: PortraitAnimeValue) => void;
    className?: string;
    disabled?: boolean;
    placement?: DropdownPlacement;
}

/**
 * Portrait/Anime selector with a split button and dropdown for Anime subtype.
 * @param {PortraitAnimeValue} value - Current value: 'portrait' | '2d' | '3d'.
 * @param {(value: PortraitAnimeValue) => void} onChange - Change handler.
 * @param {string} [className] - Optional wrapper class.
 * @param {boolean} [disabled] - Disable interaction when true.
 * @param {DropdownPlacement} [placement] - Dropdown placement.
 * @returns {JSX.Element} - Selector component.
 */
export function PortraitAnimeSelector({
    value,
    onChange,
    className,
    disabled = false,
    placement = 'top',
}: PortraitAnimeSelectorProps) {
    const [lastAnimeChoice, setLastAnimeChoice] = useState<string>('STANDARD_V1_734684_116483');
    const [animeOptions, setAnimeOptions] = useState<Array<{ name: string; pcode: string }>>([]);

    useEffect(() => {
        if (value && value !== 'portrait') {
            setLastAnimeChoice(value);
        }
    }, [value]);

    useEffect(() => {
        let mounted = true;
        (async () => {
            const list = await fetchSettingByCode<Array<{ name: string; pcode: string }>>('comic_config', []);
            if (!mounted) return;
            if (Array.isArray(list) && list.length > 0) {
                setAnimeOptions(list);
                // initialize last choice to first entry if current is still default
                setLastAnimeChoice((prev) => (prev === 'STANDARD_V1_734684_116483' ? list[0].pcode : prev));
            } else {
                setAnimeOptions([
                    { name: 'Korean Comics Long', pcode: 'STANDARD_V1_734684_116483' },
                ]);
            }
        })();
        return () => { mounted = false; };
    }, []);

    const isPortrait = value === 'portrait';
    const currentAnime = useMemo(() => (value && value !== 'portrait' ? value : lastAnimeChoice), [value, lastAnimeChoice]);
    const pcodeToName = useMemo(() => {
        const map: Record<string, string> = {};
        animeOptions.forEach((o) => { map[o.pcode] = o.name; });
        return map;
    }, [animeOptions]);

    const animeMenuItems = (animeOptions.length > 0 ? animeOptions : []).map((opt) => ({
        key: opt.pcode,
        label: (
            <div data-alt="anime-menu-item" className="flex items-center px-2 py-2 text-xs text-white">
                {opt.name}
            </div>
        ),
    }));

    return (
        <div
            data-alt="portrait-anime-selector"
            className={`inline-flex items-center gap-2 p-1 rounded-md bg-white/[0.24] ${className || ''}`}
        >
            {/* Portrait button */}
            <button
                data-alt="portrait-button"
                type="button"
                disabled={disabled}
                onClick={() => onChange('portrait')}
                className={`flex items-center ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${
                    isPortrait ? 'bg-white/60 text-black' : 'text-white/80'
                } px-1 py-0.5 rounded-md transition-all duration-200`}
            >
                <span className="text-xs">live-action</span>
            </button>

            {/* Anime split button */}
            <Dropdown
                overlayClassName="anime-dropdown"
                menu={{
                    items: animeMenuItems,
                    onClick: ({ key }) => onChange(key as PortraitAnimeValue),
                    selectable: true,
                    selectedKeys: isPortrait ? [] : [String(currentAnime)],
                }}
                trigger={["hover", "click"]}
                placement={placement}
                disabled={disabled}
            >
                <div data-alt="anime-split-group" className="flex items-center">
                    <button
                        data-alt="anime-main-button"
                        type="button"
                        disabled={disabled}
                        onClick={() => onChange(currentAnime)}
                        className={`flex items-center gap-1 ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${
                            !isPortrait ? 'bg-white/60 text-black' : 'text-white/80'
                        } px-1 py-0.5 rounded-l-md rounded-r-none transition-all duration-200`}
                    >
                        <span data-alt="anime-main-button-text" className="text-xs max-w-[100px] truncate">{!isPortrait ? `Anime:${pcodeToName[currentAnime] || String(currentAnime).toUpperCase()}` : 'Anime'}</span>
                    </button>
                    <button
                        data-alt="anime-dropdown-trigger"
                        type="button"
                        disabled={disabled}
                        className={`flex items-center gap-1 ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${
                            !isPortrait ? 'bg-white/60 text-white' : 'text-white/80'
                        } pr-1 py-1 rounded-r-md rounded-l-none transition-all duration-200`}
                    >
                        <ChevronUp className={`w-3 h-3 ${isPortrait ? 'text-white/60' : 'text-black'}`} />
                    </button>
                </div>
            </Dropdown>
        </div>
    );
}

export default PortraitAnimeSelector;