import { useRef } from "react";
import { ChatflowOption } from "./Option";
import { useOnClickOutside } from "usehooks-ts";
import clsx from "clsx";
export function SelectChatFlow({ className, chatflows, chatflow, onChatflowClicked, }) {
    const dropdown = useRef(null);
    useOnClickOutside(dropdown, () => {
        dropdown?.current?.removeAttribute("open");
    });
    return (<details ref={dropdown} className={clsx("ai-dropdown ai-dropdown-bottom ai-dropdown-center", className)}>
      <summary className="ai-bg-base-100 ai-text-base-content hover:ai-bg-base-200 ai-transition-all ai-p-2 ai-rounded-box ai-flex ai-items-center ai-justify-between ai-gap-1 ai-cursor-pointer ai-border-none ai-outline-none">
        <span className="ai-text-lg">{chatflow.name}</span>
        <span className="material-symbols-outlined ai-opacity-50">
          expand_more
        </span>
      </summary>

      <ul className="ai-dropdown-content ai-z-[1] ai-mt-2 ai-shadow-sm ai-bg-base-100 ai-rounded-box ai-text-base-content ai-border ai-border-base-content ai-border-opacity-10 ai-join-vertical">
        {chatflows.map((cf, i) => {
            const showDivider = i > 0;
            return (<div key={cf.id}>
              {showDivider && (<div key={cf.id + "--divider"} className="ai-divider ai-my-0 ai-py-0 ai-h-0"/>)}
              <ChatflowOption chatflow={cf} selected={cf.id === chatflow.id} onClick={(e) => {
                    // Close the dropdown
                    e.target
                        .closest("details")
                        ?.removeAttribute("open");
                    onChatflowClicked(cf);
                }}/>
            </div>);
        })}
      </ul>
    </details>);
}
