import { useEffect, useState } from "react";

import {
    Select,
    SelectTrigger,
    SelectContent,
    SelectValue,
    SelectItem,
} from "@common/components";

import { generalverificationApiService } from '@/entities/statistics/api/general-verification-service';

type OperatorItem = {
    opertSn: string;
    opertSymbl: string;
    opertKornNm: string;
};

interface OperatorsComponentsProps {
    cmprOpert?: string | null;
    onValueChange?: (value: string) => void;
    placeholder?: string;
}

const OperatorsComponents = ({
    cmprOpert,
    onValueChange,
    placeholder = "연산자 없음",
}: OperatorsComponentsProps) => {
    const [operators, setOperators] = useState<OperatorItem[]>([]);
    const [localValue, setLocalValue] = useState<string>(cmprOpert ?? "");

    useEffect(() => {
        setLocalValue(cmprOpert ?? "");
    }, [cmprOpert]);

    useEffect(() => {
        const fetchOperators = async () => {
            const response = await generalverificationApiService.getVrfcOperators();
            if (response.status === 'success' && response.data) {
                setOperators(response.data);
            }
        };
        fetchOperators();
    }, []);

    // onValueChange가 있으면 부모가 제어(controlled), 없으면 내부 state로 표시
    const isControlled = onValueChange !== undefined;
    const value = (isControlled ? (cmprOpert ?? "") : localValue) || "";

    return (
        <Select
            value={value}
            onValueChange={(v) => {
                setLocalValue(v);
                onValueChange?.(v);
            }}
        >
            <SelectTrigger className="!w-[150px] min-w-[150px] max-w-[150px] h-[4rem] overflow-hidden focus:outline-none focus:ring-0">
                <SelectValue placeholder={placeholder} />
            </SelectTrigger>
            <SelectContent className="w-[150px]">
                <SelectItem value='none'>
                    연산자 없음
                </SelectItem>
                {operators.map((op) => (
                    <SelectItem key={op.opertSn} value={op.opertSymbl}>
                        {op.opertKornNm}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    );
};

export default OperatorsComponents;