import { useCallback, useEffect, useMemo, useState } from "react";
import { MSG_MENUS_PROGRESSED, MSG_MENUS_UPDATEFORM } from "../config";
function Label({ children }) {
return (
{children}
);
}
function MenuItem({ children, onClick, disabled = false }) {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
onClick={onClick}
>
{children}
);
}
function Switch({ label, name, value, onChange, disabled }) {
const handleClick = useCallback(() => {
if (disabled) return;
onChange({ name, value: !value });
}, [disabled, onChange, name, value]);
return (
);
}
function Button({ label, onClick, disabled }) {
const handleClick = useCallback(() => {
if (disabled) return;
onClick();
}, [disabled, onClick]);
return (
);
}
export function Menus({
i18n,
initData,
updateSetting,
downloadSubtitle,
hasSegApi,
eventName,
}) {
const [formData, setFormData] = useState(initData);
const [progressed, setProgressed] = useState(0);
const handleChange = useCallback(
({ name, value }) => {
setFormData((pre) => ({ ...pre, [name]: value }));
updateSetting({ name, value });
},
[updateSetting]
);
useEffect(() => {
const handler = (e) => {
const { action, data } = e.detail || {};
if (action === MSG_MENUS_PROGRESSED) {
setProgressed(data);
} else if (action === MSG_MENUS_UPDATEFORM) {
setFormData((pre) => ({ ...pre, ...data }));
}
};
window.addEventListener(eventName, handler);
return () => window.removeEventListener(eventName, handler);
}, [eventName]);
const status = useMemo(() => {
if (progressed === 0) return i18n("waiting_subtitles");
if (progressed === 100) return i18n("download_subtitles");
return i18n("processing_subtitles");
}, [progressed, i18n]);
const { isAISegment, skipAd, isBilingual, showOrigin } = formData;
return (
);
}