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 LLM from "../../utils/llm";
import { DEFAULT_IMAGE_GENERATION_SETTINGS, useAppState } from "../../contexts/state";

export const ImageSettings = () => {
    const { imageGenerationSettings, dispatch } = useAppState();
    const { width, height, negative_prompt, sampler_name } = imageGenerationSettings;

    const [widthDraft, setWidthDraft] = useInputState(String(width));
    const [heightDraft, setHeightDraft] = useInputState(String(height));

    const commitWidth = () => {
        const parsed = parseInt(widthDraft, 10);
        if (!isNaN(parsed) && parsed > 0) {
            const snapped = Math.max(64, Math.round(parsed / 64) * 64);
            dispatch({
                type: 'SET_IMAGE_GENERATION_SETTINGS',
                settings: { width: snapped }
            });
            setWidthDraft(String(snapped));
        }
    };

    const commitHeight = () => {
        const parsed = parseInt(heightDraft, 10);
        if (!isNaN(parsed) && parsed > 0) {
            const snapped = Math.max(64, Math.round(parsed / 64) * 64);
            dispatch({
                type: 'SET_IMAGE_GENERATION_SETTINGS',
                settings: { height: snapped }
            });
            setHeightDraft(String(snapped));
        }
    };

    const setNegativePrompt = useInputCallback((value) => {
        dispatch({ type: 'SET_IMAGE_GENERATION_SETTINGS', settings: { negative_prompt: value } });
    }, []);

    const handleSamplerChange = useInputCallback((value) => {
        dispatch({
            type: 'SET_IMAGE_GENERATION_SETTINGS',
            settings: { sampler_name: value as LLM.ImageSamplerName },
        });
    }, []);

    const handleReset = () => {
        dispatch({
            type: 'SET_IMAGE_GENERATION_SETTINGS',
            settings: DEFAULT_IMAGE_GENERATION_SETTINGS,
        });
        setWidthDraft(String(DEFAULT_IMAGE_GENERATION_SETTINGS.width));
        setHeightDraft(String(DEFAULT_IMAGE_GENERATION_SETTINGS.height));
    };

    return (
        <div class={styles.form}>
            <div class={styles.formGroup}>
                <label class={styles.label}>
                    Width
                    <span class={styles.labelHint}>(default: {DEFAULT_IMAGE_GENERATION_SETTINGS.width})</span>
                </label>
                <input
                    type="number"
                    value={widthDraft}
                    min={64}
                    step={64}
                    class={styles.input}
                    onInput={setWidthDraft}
                    onBlur={commitWidth}
                    onKeyDown={(e) => e.key === 'Enter' && commitWidth()}
                />
            </div>
            <div class={styles.formGroup}>
                <label class={styles.label}>
                    Height
                    <span class={styles.labelHint}>(default: {DEFAULT_IMAGE_GENERATION_SETTINGS.height})</span>
                </label>
                <input
                    type="number"
                    value={heightDraft}
                    min={64}
                    step={64}
                    class={styles.input}
                    onInput={setHeightDraft}
                    onBlur={commitHeight}
                    onKeyDown={(e) => e.key === 'Enter' && commitHeight()}
                />
            </div>
            <div class={styles.formGroup}>
                <label class={styles.label}>Sampler</label>
                <select
                    value={sampler_name}
                    onChange={handleSamplerChange}
                    class={styles.select}
                >
                    {Object.values(LLM.ImageSamplerName).map(s => (
                        <option key={s} value={s}>{s}</option>
                    ))}
                </select>
            </div>
            <div class={clsx(styles.formGroup, styles.formGroupFill)}>
                <label class={styles.label}>Negative Prompt</label>
                <textarea
                    rows={3}
                    value={negative_prompt}
                    onInput={setNegativePrompt}
                    placeholder="Things to avoid in generated images..."
                    class={clsx(styles.input, styles.textarea)}
                />
            </div>
            <div>
                <button class={styles.buttonSecondary} onClick={handleReset}>
                    Reset to defaults
                </button>
            </div>
        </div>
    );
};
