import { useState, useRef, useEffect } from "react";
import Badge from "./Badge";
import Dropdown from "./Dropdown";
import IconCaretDown from "./Icon/IconCaretDown";

const StatusBadge = ({
    initialStatus,
    onChange,
}: {
    initialStatus: string;
    onChange?: (status: string) => void;
}) => {
    const [status, setStatus] = useState(initialStatus);
    const dropdownRef = useRef<any>(null);

    useEffect(() => {
        setStatus(initialStatus);
    }, [initialStatus]);

    const isActive = status === "ACTIVE";
    const nextStatus = isActive ? "INACTIVE" : "ACTIVE";

    return (
        <Dropdown
            btnClassName="cursor-pointer"
            ref={dropdownRef}
            placement="bottom-end"
            button={
                <Badge
                    color={isActive ? "success" : "danger"}
                    variant="outline"
                    className="text-xs flex items-center gap-1"
                    rounded
                >
                    {status}
                    <IconCaretDown />
                </Badge>
            }
        >
            <ul className="text-dark !py-0 font-semibold text-xs">
                <li className="px-2 py-1">
                    <button
                        className="w-full text-left hover:bg-gray-100"
                        onMouseDown={(e) => {
                            e.stopPropagation();

                            setStatus(nextStatus);
                            onChange?.(nextStatus);

                            dropdownRef.current?.close?.();
                        }}
                    >
                        <Badge
                            color={isActive ? "danger" : "success"}
                            variant="outline"
                            className="text-xs"
                            rounded
                        >
                            {nextStatus}
                        </Badge>
                    </button>
                </li>
            </ul>
        </Dropdown>
    );
};

export default StatusBadge;