"use client"
import { useEffect, useState } from 'react';
import { signIn, signOut, useSession } from "next-auth/react";
import { getFips } from 'crypto';
import { Button, Modal } from 'flowbite-react';
import ValidasiLogin from '@/app/component/loginvalidasi';


function convertToWebP(file, maxWidth, maxHeight) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = function (event) {
            const img = new Image();
            img.onload = function () {
                let width = img.width;
                let height = img.height;

                // Mengatur ukuran gambar
                if (width > maxWidth || height > maxHeight) {
                    const aspectRatio = width / height;

                    if (width > maxWidth) {
                        width = maxWidth;
                        height = width / aspectRatio;
                    }

                    if (height > maxHeight) {
                        height = maxHeight;
                        width = height * aspectRatio;
                    }
                }

                const canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;

                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);

                // Konversi ke format WebP
                canvas.toBlob(function (blob) {
                    if (!blob) {
                        reject(new Error('Konversi ke format WebP gagal'));
                    } else {
                        resolve(blob);
                    }
                }, 'image/webp', 0.8); // Kualitas gambar, dalam hal ini, 0.8
            };

            img.src = event.target.result;
        };

        reader.readAsDataURL(file);
    });
}

function blobToBase64(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = function () {
            const base64String = reader.result.split(',')[1]; // Mengambil bagian base64 saja
            resolve(base64String);
        };

        reader.onerror = function (error) {
            reject(error);
        };

        reader.readAsDataURL(blob);
    });
}

export default function EditProfile() {
    const [popupVisible, setPopUpVisible] = useState(false);
    const [avatar, setAvatar] = useState("");
    const [fullname, setName] = useState("");
    const [email, setEmail] = useState("");
    const [about, setAbout] = useState("");
    const [telp, setTelp] = useState("");
    const [password, setPassword] = useState("");
    const [dataResponse, setDataresponse] = useState(null);
    const [uniqId, setUniqId] = useState(null);
    const [openModal, setOpenModal] = useState();
    const props = { openModal, setOpenModal };
    const openPopUp = () => {
        setPopUpVisible(true);
    };
    const closePopUp = () => {
        setPopUpVisible(false);
    };
    const warning = function(text){
        alert(text);
        throw 'stop action';
    }
    const submitAction = function(){
        telp?telp:warning('Telp wajib diisi');
        password?password:warning('Password wajib diisi');
        let data = {
            password: password
            , email: email
            , telp: telp
            , fullname: fullname
            , about: about
            , uniqid: uniqId
            , avatar: avatar
        }
        fetch('/api/update/profile', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        }).then((res)=>{
            return res.json();
        })
        .then((res)=>{
            props.setOpenModal('dismissible')
            console.log(res)
        })
    }
    const { data: session } = useSession();
    if (!dataResponse){
        if(session){
            let email = session.user.email;
            //console.log(session);
            setAvatar(session.user.image);
            setDataresponse(1);
            fetch('/api/user?email='+email)
                .then((res)=>{
                    return res.json()
                })
                .then((res)=>{
                    let [data] = res.message;
                    setUniqId(data.uniqid)
                    setName(data.fullname)
                    setEmail(data.email)
                    setAbout(data.about)
                    setPassword(data.password)
                    setTelp(data.telp)
                    if (data.avatar!=='' && data.avatar!==null) {
                        setAvatar(data.avatar)
                    }
                })
        }
    }

    const uploadChange = async function(e){
        let el = e.target.files[0];
        let webp = await convertToWebP(el, 720, 720);
        let base64 = await blobToBase64(webp);
        const formData = new FormData();
        formData.append("content", base64);
        formData.append("uniq", uniqId);
        formData.append("time", Date.now());
        fetch("/api/profile", { method: 'POST', body: formData })
        .then(function(r){
            return r.json()
        }).then(function(r){
            window.location.reload();
        })
        .catch(function(o){
            console.log(o)
        })
    }

    return (<>
        <ValidasiLogin>
        <Modal dismissible show={props.openModal === 'dismissible'} onClose={() => props.setOpenModal(undefined)}>
            <Modal.Header>Success</Modal.Header>
            <Modal.Body>
                <div className="space-y-6">
                    <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                        Data telah diupdate
                    </p>
                </div>
            </Modal.Body>
            <Modal.Footer>
                <Button color="gray" onClick={() => props.setOpenModal(undefined)}>
                    Tutup
                </Button>
            </Modal.Footer>
        </Modal>
        <div className="grid grid-cols-6 gap-4">
            <div className="col-start-auto lg:col-start-2 col-span-6 lg:col-span-4 mt-14 md:mt-5">
                <div className="bg-white shadow-md md:mb-2 px-5 md:p-5 rounded-xm">
                    <div className="hidden md:block pb-[16px]">
                        <h3 className="text-[20px] font-bold text-gray-800">Edit Profil</h3>
                    </div>
                    <div className="pt-[16px] border-b border-gray-400">
                        <div className="text-[16px] leading-[24px] font-bold py-[8px] text-gray-800 border-0 md:border-t border-gray-400">Informasi Dasar</div>
                        <div className="pb-[16px]">
                            <div className="flex items-center md:flex-row md:justify-start box-border flex-wrap">
                                <div className="basis-[27.5%] md:basis-[15%]">
                                    <input 
                                        type="hidden"
                                        value={avatar?avatar:''}
                                        onChange={(e) => {
                                            setName(e.target.value);
                                        }}
                                        name="avatar"
                                    />
                                    <figure 
                                    style={{
                                        backgroundImage: "url("+`${avatar+'?v='+Date.now()}`+")"
                                    }}
                                    className="relative overflow-hidden w-[96px] md:w-[120px] h-[96px] md:h-[120px] bg-[50%] bg-cover rounded-full m-0">
                                        <div onClick={openPopUp} className="flex md:hidden absolute bottom-0 left-0 right-0 bg-[rgba(0,47,52,.7)] h-[32px] justify-center items-center cursor-pointer">
                                            <svg className="w-[24px] h-[24px]" viewBox="0 0 1024 1024" fillRule="evenodd"><path d="M670.72 128l42.667 128h182.613l42.667 42.667v554.667l-42.667 42.667h-768l-42.667-42.667v-554.667l42.667-42.667h182.613l42.667-128h317.44zM609.28 213.333h-194.56l-42.667 128h-201.387v469.333h682.667v-469.333h-201.387l-42.667-128zM512 341.333c117.632 0 213.333 95.701 213.333 213.333s-95.701 213.333-213.333 213.333-213.333-95.701-213.333-213.333 95.701-213.333 213.333-213.333zM512 426.667c-70.613 0-128 57.387-128 128s57.387 128 128 128 128-57.387 128-128-57.387-128-128-128z"></path></svg>
                                        </div>
                                    </figure>
                                </div>
                                <div className="hidden md:block basis-[22.5%] pr-2">
                                    <div className="relative">
                                        <div className="flex flex-row flex-wrap items-start relative">
                                            <div className="items-center flex w-full">
                                                <input id="upload-profile" onChange={uploadChange} className='hidden' type='file'></input>
                                                <button onClick={()=>{
                                                        let imageProfile = document.getElementById('upload-profile');
                                                        imageProfile.click();
                                                }} className="border-2 h-[48px] border-yellow-400 w-full inline-flex justify-center items-center box-border cursor-pointer relative overflow-hidden rounded-md">
                                                    <span>Unggah</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="hidden md:block basis-[22.5%] pl-2">
                                    <div className="relative">
                                        <div className="flex flex-row flex-wrap items-start relative">
                                            <div className="items-center flex w-full">
                                                <button className="border-2 h-[48px] border-red-500 bg-red-500 text-white w-full inline-flex justify-center items-center box-border cursor-pointer relative overflow-hidden rounded-md">
                                                    <span>Hapus</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="basis-[72.5%] md:basis-[60%] pl-[16px] md:pl-0 flex flex-row items-start flex-wrap">
                                    <div className="flex w-full items-center">
                                        <div className="grow">
                                            <input type="text"
                                            value={fullname?fullname:''}
                                            onChange={(e) => {
                                                setName(e.target.value);
                                            }}
                                                name="fullname" placeholder="Nama Lengkap"
                                                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="flex items-center md:flex-row md:justify-start box-border flex-wrap">
                                <div className="basis-[100%] md:basis-[60%] flex flex-row items-start flex-wrap my-4">
                                    <div className="flex w-full items-center">
                                        <div className="grow">
                                            <textarea rows="4" onChange={(e)=>{
                                                setAbout(e.target.value)
                                            }} value={about?about:''} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Tentang saya (opsional)"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="flex items-center md:flex-row md:justify-start box-border flex-wrap">
                                <div className="basis-[0%] md:basis-[60%] flex flex-row items-start flex-wrap my-4">
                                    
                                </div>
                                <div className="basis-[100%] md:basis-[40%] md:h-[10px] flex flex-row items-start flex-wrap">
                                    <div className="md:relative md:bottom-[465px] justify-center m-0 md:ml-[8px]">
                                        <div className="max-w-full text-center text-[15px] leading-[20px] md:mt-[20px]">
                                        <span className="max-w-full text-center font-bold leading-[20px]">Donasi sekarang dan bantu kami mewujudkan impian Anda</span>
                                            <center className="md:pt-14 lg:pt-7">
                                                <img className="w-[75%]" src="/qris.jpeg" />
                                            </center>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="text-[16px] leading-[24px] font-bold py-2 text-gray-800 border-t border-gray-400">Informasi Kontak</div>
                        <div className="pb-[16px]">
                            <div className="flex items-center md:flex-row md:justify-start box-border flex-wrap my-4">
                                <div className="basis-[100%] md:basis-[60%] flex flex-row items-start flex-wrap">
                                    <div className="flex w-full items-center">
                                        <div className="grow">
                                                <input type="text"
                                                value={telp?telp:''}
                                                onChange={(e) => {
                                                    setTelp(e.target.value)
                                                }}
                                                    name="telp" placeholder="+6281234567890"
                                                    className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                                />
                                        </div>
                                    </div>
                                </div>
                                <div className="basis-[100%] md:basis-[40%] flex flex-row items-start flex-wrap">
                                    <div className='text-[12px] leading-[18px] m-0 md:ml-[8px]'>
                                        <span>Apakah ini penting?. Hal tersebut penting untuk memungkinkan kami berkomunikasi dengan Anda dengan aman.</span>
                                    </div>
                                </div>
                            </div>
                            <div className="flex items-center md:flex-row md:justify-start box-border flex-wrap my-4">
                                <div className="basis-[100%] md:basis-[60%] flex flex-row items-start flex-wrap">
                                    <div className="flex w-full items-center">
                                        <div className="grow">
                                                <input type="text"
                                                name="email" onChange={(e) => {
                                                    setEmail(e.target.value)
                                                }} value={email?email:""} placeholder="Email"
                                                    className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                                />
                                        </div>
                                    </div>
                                </div>
                                <div className="basis-[100%] md:basis-[40%] flex flex-row items-start flex-wrap">
                                    <div className='text-[12px] leading-[18px] m-0 md:ml-[8px]'>
                                        <span>Kami tidak akan mengungkapkan email Anda kepada orang lain atau menggunakannya untuk mengirimi Anda spam.</span>
                                    </div>
                                </div>
                            </div>
                            <div className="flex items-center md:flex-row md:justify-start box-border flex-wrap my-4">
                                <div className="basis-[100%] md:basis-[60%] flex flex-row items-start flex-wrap">
                                    <div className="flex w-full items-center">
                                        <div className="grow">
                                                <input type="password"
                                                onChange={(e) => {
                                                    setPassword(e.target.value)
                                                }}
                                                value={password?password:""}
                                                    name="password" placeholder="Password"
                                                    className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                                />
                                        </div>
                                    </div>
                                </div>
                                <div className="basis-[100%] md:basis-[40%] flex flex-row items-start flex-wrap">
                                    <div className='text-[12px] leading-[18px] m-0 md:ml-[8px]'>
                                        <span>Ini sangat rahasia bagi Anda dan kami akan menjaganya dengan baik pada sitem yang telah kami bangun.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="pb-[16px]">
                        <div className="flex items-center md:flex-row md:justify-start box-border flex-wrap">
                            <div className="basis-[100%] md:basis-[25%] pt-7">
                                <div className="relative">
                                    <div className="flex flex-row flex-wrap items-start relative">
                                        <div className="items-center flex w-full">
                                            <button onClick={submitAction} type="submit" className="border-2 h-[48px] border-yellow-400 bg-indigo-950 text-white w-full inline-flex justify-center items-center box-border cursor-pointer relative overflow-hidden rounded-md">
                                                <span>Simpan Perubahan</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    { popupVisible && (
        <div onClick={closePopUp}>
            <div className="items-end fixed z-[9999] flex justify-center bg-[rgba(0,0,0,.8)]" style={{top:"0",left:"0",bottom:"0",right:"0",transform:"translateZ(0)"}}>
                <div className="bg-white absolute" style={{padding:"16px 16px 8px",bottom:"0",left:"0",right:"0"}}>
                    <button className="px-[10px] mb-[10px] border-2 border-yellow-400 h-[40px] w-full inline-flex justify-center items-center box-border cursor-pointer relative overflow-hidden rounded-md">
                        <span>Unggah</span>
                    </button>
                    <button className="px-[10px] mb-[10px] border-2 border-red-500 bg-red-500 text-white h-[40px] w-full inline-flex justify-center items-center box-border cursor-pointer relative overflow-hidden rounded-md">
                        <span>Hapus</span>
                    </button>
                </div>
            </div>
        </div>
    )}
        </ValidasiLogin>
    </>)
}