import { useLanguageOptions } from "@/hooks/useLanguageOptions";
import usePfp from "@/hooks/usePfp";
import System from "@/models/system";
import Appearance from "@/models/appearance";
import { AUTH_USER } from "@/utils/constants";
import showToast from "@/utils/toast";
import { Info, Plus, X } from "@phosphor-icons/react";
import ModalWrapper from "@/components/ModalWrapper";
import { useTheme } from "@/hooks/useTheme";
import { useTranslation } from "react-i18next";
import { useState, useEffect } from "react";
import { Tooltip } from "react-tooltip";
export default function AccountModal({ user, hideModal }) {
const { pfp, setPfp } = usePfp();
const { t } = useTranslation();
const handleFileUpload = async (event) => {
const file = event.target.files[0];
if (!file) return false;
const formData = new FormData();
formData.append("file", file);
const { success, error } = await System.uploadPfp(formData);
if (!success) {
showToast(t("profile_settings.failed_upload", { error }), "error");
return;
}
const pfpUrl = await System.fetchPfp(user.id);
setPfp(pfpUrl);
showToast(t("profile_settings.upload_success"), "success");
};
const handleRemovePfp = async () => {
const { success, error } = await System.removePfp();
if (!success) {
showToast(t("profile_settings.failed_remove", { error }), "error");
return;
}
setPfp(null);
};
const handleUpdate = async (e) => {
e.preventDefault();
const data = {};
const form = new FormData(e.target);
for (var [key, value] of form.entries()) {
if (!value || value === null) continue;
data[key] = value;
}
const { success, error } = await System.updateUser(data);
if (success) {
let storedUser = JSON.parse(localStorage.getItem(AUTH_USER));
if (storedUser) {
storedUser.username = data.username;
storedUser.bio = data.bio;
localStorage.setItem(AUTH_USER, JSON.stringify(storedUser));
}
showToast(t("profile_settings.profile_updated"), "success", {
clear: true,
});
hideModal();
} else {
showToast(t("profile_settings.failed_update_user", { error }), "error");
}
};
return (
{t("profile_settings.edit_account")}
);
}
function LanguagePreference() {
const {
currentLanguage,
supportedLanguages,
getLanguageName,
changeLanguage,
} = useLanguageOptions();
const { t } = useTranslation();
return (
);
}
function ThemePreference() {
const { theme, setTheme, availableThemes } = useTheme();
const { t } = useTranslation();
return (
);
}
function AutoSubmitPreference() {
const [autoSubmitSttInput, setAutoSubmitSttInput] = useState(true);
const { t } = useTranslation();
useEffect(() => {
const settings = Appearance.getSettings();
setAutoSubmitSttInput(settings.autoSubmitSttInput ?? true);
}, []);
const handleChange = (e) => {
const newValue = e.target.checked;
setAutoSubmitSttInput(newValue);
Appearance.updateSettings({ autoSubmitSttInput: newValue });
};
return (
);
}
function AutoSpeakPreference() {
const [autoPlayAssistantTtsResponse, setAutoPlayAssistantTtsResponse] =
useState(false);
const { t } = useTranslation();
useEffect(() => {
const settings = Appearance.getSettings();
setAutoPlayAssistantTtsResponse(
settings.autoPlayAssistantTtsResponse ?? false
);
}, []);
const handleChange = (e) => {
const newValue = e.target.checked;
setAutoPlayAssistantTtsResponse(newValue);
Appearance.updateSettings({ autoPlayAssistantTtsResponse: newValue });
};
return (
);
}