import { h, createContext } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js';
import { useState, useEffect, useRef } from '/js/web_modules/preact/hooks.js';
import UsernameForm from './username.js';
import { ChatIcon, UserIcon, CaretDownIcon, AuthIcon } from '../icons/index.js';
const html = htm.bind(h);
const moderatorFlag = html`
`;
const Context = createContext();
export const ChatMenu = (props) => {
const {
username,
isModerator,
chatDisabled,
noVideoContent,
handleChatPanelToggle,
onUsernameChange,
showAuthModal,
onFocus,
onBlur,
} = props;
const [chatMenuOpen, setChatMenuOpen] = useState(false);
const [view, setView] = useState('main');
const chatMenuRef = useRef(undefined);
closeOnOutsideClick(chatMenuRef, setChatMenuOpen);
useEffect(() => {
if (chatMenuOpen) setView('main');
}, [chatMenuOpen]);
const authMenuItem =
showAuthModal &&
html`