import { useContext, useEffect, useState } from "preact/hooks";
import { FaEdit, FaPlus, FaTrash } from "react-icons/fa";
import { Pb } from "../EspaceMembres";
import type { UsersRecord } from "../../types/pb_types";
import { createContext } from "preact";

const FormContext = createContext((key: string, value: string) => { });

function SimpleHome() {
    const pb = useContext(Pb);
    const { firstname, lastname }: UsersRecord = pb.authStore.model || {};
    const email = pb.authStore.model?.email || "";

    const [form, setForm] = useState([]);

    const setFormValue = (key: string, value: string) => {
        setForm((prev) => ({ ...prev, [key]: value }));
    };

    const onSubmit = (e: Event) => {
        e.preventDefault();
        saveForm(form);
    };

    const saveForm = (data: { [key: string]: string }[]) => {
        const record = pb.collection("users").update(pb.authStore.model?.id, data);
        record.then((res) => {
            console.log(res);
        }).catch((error) => {
            console.error(error);
        });
    }

    return (
        <div className="flex gap-8 p-8 flex-col md:flex-row">
            <section className="w-full md:w-1/2 card bg-base-100 shadow-xl">
                <div className="card-body">
                    <div className="flex justify-between items-center mb-4">
                        <h1 className="text-2xl font-bold">Gallery</h1>
                        <button className="btn btn-outline">
                            <FaPlus />
                        </button>
                    </div>
                    <div className="grid grid-cols-3 gap-4">
                        {[...Array(6)].map((_, i) => (
                            <Picture key={i} />
                        ))}
                    </div>
                </div>
            </section>
            <section className="w-full md:w-1/2 card bg-base-100 shadow-xl">
                <div className="card-body">
                    <h2 className="text-2xl font-bold">Informations personnelles</h2>
                    <FormContext.Provider value={setFormValue}>
                        <form className="mt-4 flex flex-col gap-2" onSubmit={onSubmit}>
                            <FormInput label="Nom" id="lastname" value={lastname} />
                            <FormInput label="Prénom" id="firstname" value={firstname} />
                            <FormInput label="Email" id="email" type="email" value={email} disabled />
                            <div className="mt-2">
                                <button className="btn btn-neutral">Enregistrer</button>
                            </div>
                        </form>
                    </FormContext.Provider>
                </div>
            </section>
        </div>
    );
}

function FormInput({
    label,
    id,
    type = "text",
    value,
    className,
    disabled,
}: {
    label: string;
    id: string;
    type?: string;
    value?: string;
    className?: string;
    disabled?: boolean;
}) {
    const setFormValue = useContext(FormContext);
    const [val, setVal] = useState(value);

    const onChange = (e: Event) => {
        const target = e.target as HTMLInputElement;
        setVal(target.value);
        setFormValue(target.id, target.value);
    }

    useEffect(() => {
        setFormValue(id, value || "");
    }, [value]);

    return (
        <label htmlFor={id} class="form-control w-full max-w-xs">
            <div class="label">
                <span class="label-text">{label}</span>
            </div>
            <input
                type={type}
                placeholder={label}
                class="input input-bordered w-full max-w-xs"
                id={id}
                value={val}
                onInput={onChange}
                disabled={disabled}
            />
        </label>
    );
}

function Picture() {
    return (
        <div className="relative overflow-hidden rounded-lg transition-all after:opacity-0 after:absolute after:inset-0 after:bg-black hover:after:opacity-20 focus:after:opacity-20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group cursor-pointer">
            <img
                src="https://picsum.photos/600/600"
                width={600}
                height={600}
                alt="Gallery Image"
                className="object-cover aspect-square"
            />
            <div className="absolute top-2 right-2 gap-2 flex opacity-0 group-hover:opacity-100 transition-all">
                <button className="btn btn-sm btn-circle btn-primary">
                    <FaEdit />
                </button>
                <button className="btn btn-sm btn-circle btn-error">
                    <FaTrash />
                </button>
            </div>
        </div>
    );
}

export default SimpleHome;
