'use client'
import { useState } from "react"
import ChangePasswordModal from "./ChangePasswordModal"
import { useSelector } from "react-redux"
import { AppStore } from "@/lib/store"
import dynamic from "next/dynamic"
import { useTranslation } from "@/Utils/Hooks/useTranslate"
import GradientButton from "@/Component/Common/Forms/GradientButton"

const GoogleLogin = dynamic(() => import('@/Component/Auth/Login/SocialLogin/GoogleLogin'), { ssr: false });

const PasswordAndSecurity = () => {
    const { translations, locale } = useTranslation();
    const [modal, setModal] = useState<any>(null);
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    const toggleDiv = () => {
        setModal(true)
    };
    return (
        <>
            <div>
                <div className="border-b border-lightGray pb-8">
                    <h2 className="text-primary text-xl mb-6 font-medium leading-6">🔒 {translations?.passwordSecurity}</h2>
                    <h3 className="text-black text-lg mb-7 font-semibold leading-6">{translations?.signIn}</h3>
                    <h3 className="text-black text-lg mb-2 font-bold leading-6">{translations?.connectorPassword}</h3>
                    <p className="text-black text-sm leading-6 font-normal">{translations?.connectorPasswordMessage} <span onClick={toggleDiv}
                        className="text-primary text-sm leading-6 font-bold underline cursor-pointer">{translations?.changePassword}</span></p>
                </div>
                <div className="md:pb-8 pb-4 flex flex-col md:flex-row gap-4 items-center justify-between max-md:items-start pt-8">
                    <div className="">
                        <h3 className="text-black text-lg mb-2 font-bold leading-6">{translations?.googleLogin}</h3>
                        {userDetails?.social_id ? <p className="text-black text-sm leading-6 font-normal">{translations?.connectedWithGoogle}</p> :
                            <p className="text-black text-sm leading-6 font-normal">{translations?.notConnectedGoogle}</p>}
                    </div>
                    {userDetails?.social_id ? <GradientButton customClass="min-w-40" disabled>{translations?.connected}</GradientButton> :
                        <GoogleLogin translations={translations} locale={locale} fromProfile={true} userDetails={userDetails} />}
                </div>
            </div>
            {modal && <ChangePasswordModal modal={modal} setModal={setModal} translations={translations} />}
        </>
    )
}

export default PasswordAndSecurity