import { type Component, type JSXElement } from "solid-js";
import { IInputProps } from "./types";

const Input: Component<IInputProps> = (props: IInputProps) => {
    const handleEnter = (e: KeyboardEvent) => {
        if (e.key === "Enter") {
            props.onSubmit?.();
        }
    };

    const submitHtml = (): JSXElement => (
        <button
            class={`bg-stone-950 btn btn-neutral h-full ${props.rounded ? "rounded-full" : "rounded-xl"}`}
            onClick={props.onSubmit}
        >
            {props.submitText}
        </button>
    );

    const inputHtml = (): JSXElement => (
        <input
            type={props.type ? props.type : "text"}
            placeholder={props.placeholder}
            value={props.value}
            onInput={(e) => props.onChange?.(e.currentTarget.value)}
            onKeyDown={handleEnter}
        />
    );

    const textAreaHtml = (): JSXElement => (
        <textarea
            class="w-full h-full outline-none hover:outline-none px-5 py-3 resize-none"
            placeholder={props.placeholder}
            value={props.value}
            onInput={(e) => props.onChange?.(e.currentTarget.value)}
            onKeyDown={handleEnter}
        />
    );

    return (
        <div
            class={`bg-stone-800 ${props.textArea ? "h-32" : "h-16"} p-2 flex flex-row gap-2 ${props.rounded ? "rounded-full" : "rounded-2xl"} ${props.outline ? "outline-2" : ""}`}
        >
            <label
                class={`bg-stone-800 input ${props.textArea ? "px-0" : "px-5"} w-full h-full focus:border-none outline-none ${props.rounded ? "rounded-full" : "rounded-xl"}`}
            >
                {props.textArea ? textAreaHtml() : inputHtml()}
            </label>
            {props.submitText ? submitHtml() : undefined}
        </div>
    );
};

export { Input };