import * as React from 'react'
import { CardPage, MapOverlayPage } from '../Templates'
import { useItems } from '../Map/hooks/useItems'
import { useLocation, useNavigate } from 'react-router-dom'
import { useState } from 'react';
import { Item, UserItem } from '../../types';
import { getValue } from '../../Utils/GetValue';
import { useMap } from 'react-leaflet';
import { LatLng } from 'leaflet';
import { TextView } from '../Map';
import useWindowDimensions from '../Map/hooks/useWindowDimension';
import { toast } from 'react-toastify';
import { useAuth } from '../Auth';
import { TextInput } from '../Input';

export function OverlayUserSettings() {
    const { user, updateUser, loading, token } = useAuth();

    const [id, setId] = useState<string>("");
    const [email, setEmail] = useState<string>("");
    const [password, setPassword] = useState<string>("");



    const [passwordChanged, setPasswordChanged] = useState<boolean>(false);



    const navigate = useNavigate();

    React.useEffect(() => {
        setId(user?.id ? user.id : "");
        setEmail(user?.email ? user.email : "");
        setPassword(user?.password ? user.password : "");
    }, [user])






    const onUpdateUser = () => {
        let changedUser = {} as UserItem;

        changedUser = { id: id, email: email, ...passwordChanged && { password: password } };


        toast.promise(

            updateUser(changedUser),
            {
                pending: 'updating Profile  ...',
                success: 'Profile updated',
                error: {
                    render({ data }) {
                        return `${data}`
                    },
                },
            })
            .then(() => navigate("/"));
    }


    return (
        <MapOverlayPage backdrop className='tw-mx-4 tw-mt-4 tw-max-h-[calc(100dvh-96px)] tw-h-fit md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-max-w-xl !tw-left-auto tw-top-0 tw-bottom-0'>
            <div className={`tw-text-xl tw-font-semibold`}>Settings</div>
            <div className="tw-divider tw-mt-2"></div>
            <div className="tw-grid tw-grid-cols-1 tw-gap-6">
                <TextInput type='email' placeholder="new E-Mail" defaultValue={user?.email ? user.email : ""} updateFormValue={(v) => setEmail(v)} />
                <TextInput type='password' placeholder="new Password" defaultValue={user?.password ? user.password : ""} updateFormValue={(v) => {
                    setPassword(v);
                    setPasswordChanged(true);
                }} />
                {/* <ToogleInput updateType="syncData" labelTitle="Sync Data" defaultValue={true} updateFormValue={updateFormValue}/> */}
            </div>

            <div className="tw-mt-8"><button className={loading ? " tw-loading tw-btn-disabled tw-btn tw-btn-primary tw-float-right" : "tw-btn tw-btn-primary tw-float-right"} onClick={() => onUpdateUser()}>Update</button></div>

        </MapOverlayPage>
    )
}