import React, { useMemo, useState } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage";
import queryKeys from "../../services/queryKeys";
import { useQuery } from "@tanstack/react-query";
import { profileDetails } from "../../services/services";
import ProfileForm from "./ProfileForm";
import LinksForm from "./LinksForm";
import ProfileImage from "./ProfileImage";

export default function Settings() {

    const [intialData, setInitialData] = useState({
        external_links: {},
        personal_data: {},
    })

    const {data:profileInfo, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.profile_data,
        queryFn: () => {
            let reqData = {
                token: localStorage.getItem('token'), // USER TOKEN
                uid: localStorage.getItem('uid') // USER UID
            }
            return profileDetails(reqData)
        }
    })
    // const profileData = profileInfo?.data // profile data
    useMemo(()=>{
        const data = profileInfo?.data
        setInitialData({external_links: data?.external_links, personal_data: data?.personal_data})
    },[profileInfo])
    // console.log('INI', intialData)

    return (
        <>
            <BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']}/>
            {/*<div className="row">*/}
            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
            {/*</div>*/}

            {isFetching ? 
                <>
                <div className="row">
                    <div className="col-12">
                    <p className="text-mute">Loading...</p>
                    </div>
                </div>
                </>
            : isError ? 
                <div className="row">
                <div className="col-12">
                    <p className="text-danger">{error?.message}</p>
                </div>
                </div>
                :
                <div className="row account-contant">
                    <div className="col-12">
                        <div className="card card-statistics">
                            <div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
                                <div className="row no-gutters">
                                    <ProfileImage intialData={intialData} />
                                    <div className="col-xl-5 col-md-6 col-12 border-t border-right">
                                        <div className="page-account-form">
                                            <div className="form-titel border-bottom p-3">
                                                <h5 className="mb-0 py-2">Edit Your Personal Settings</h5>
                                            </div>
                                            <div className="p-4">
                                                <ProfileForm data={intialData.personal_data} />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-xl-4 col-md-6 border-t col-12">
                                        <div className="page-account-form">
                                            <div className="form-titel border-bottom p-3">
                                                <h5 className="mb-0 py-2">Your External Link</h5>
                                            </div>
                                            <div className="p-4">
                                                <LinksForm data={intialData.external_links} />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </>
    )
}