import { ContentEditable } from "@common/components/ContentEditable";
import { useInputCallback } from "@common/hooks/useInputCallback";
import { useInputState } from "@common/hooks/useInputState";
import clsx from "clsx";
import styles from "../../assets/settings-modal.module.css";
import { useAppState } from "../../contexts/state";

export const UserSettings = () => {
    const { userName, userDescription, dispatch } = useAppState();

    const [nameValue, setNameValue] = useInputState(userName);

    const handleNameBlur = () => {
        const trimmed = nameValue.trim();
        if (trimmed !== userName) {
            dispatch({ type: "SET_USER_NAME", userName: trimmed || "User" });
        }
    };

    const setDescription = useInputCallback((value) => {
        dispatch({ type: "SET_USER_DESCRIPTION", userDescription: value });
    }, []);

    return (
        <div class={styles.form}>
            <div class={styles.formGroup}>
                <label class={styles.label}>Your Name</label>
                <input
                    type="text"
                    value={nameValue}
                    onInput={setNameValue}
                    onBlur={handleNameBlur}
                    placeholder="User"
                    class={styles.input}
                />
            </div>
            <div class={clsx(styles.formGroup, styles.formGroupFill)}>
                <label class={styles.label}>Your Description</label>
                <ContentEditable
                    highlight
                    value={userDescription}
                    onInput={setDescription}
                    placeholder="Describe yourself for the AI..."
                    class={clsx(styles.input, styles.textarea)}
                />
            </div>
        </div>
    );
};
