"use client"
import React from 'react'
import AuthWrapper from '../AuthWrapper'
import { useTranslations } from 'next-intl';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '@/store/store';
import { deleteAcc, logout } from '@/store/profile';
import { DeleteAccIcon, LogoutAccIcon } from '@/assets/svgs/Icons';
import { useRouter } from 'next/navigation';
import Swal from 'sweetalert2';


const AccountBtns = () => {
    const t = useTranslations();
    const dispatch = useDispatch<AppDispatch>();
    const router = useRouter();

    const handleLogout = async ()=>{
      const result = await Swal.fire({
            title: t("Text.logoutTitle"),
            text:t("Text.logoutDesc"),
            iconHtml:` `,
            showConfirmButton:true,
            showCancelButton:true,
            showCloseButton:true,
            closeButtonHtml: `<div class="swal-close-btn"> x </div>`,
              customClass:{
              icon:"hidden-icon",
              title:"swal-title",
              confirmButton:"app-btn alert-btn",
              cancelButton:"app-btn outline-btn"
            },
            // showCancelButton: true,
            confirmButtonText: t("buttons.ok"),
            cancelButtonText:  t("buttons.noKeepMe") ,
        });
        if(result.isConfirmed){
          dispatch(logout({router}))
        }
    }

    const handleDelete = async ()=>{
      const result = await Swal.fire({
            title: t("NAV.deleteAccount"),
            text:t("Text.deleteAccountDesc"),
            iconHtml:` `,
            showConfirmButton:true,
            showCancelButton:true,
            showCloseButton:true,
            closeButtonHtml: `<div class="swal-close-btn"> x </div>`,
              customClass:{
              icon:"hidden-icon",
              title:"swal-title",
              confirmButton:"app-btn alert-btn",
              cancelButton:"app-btn outline-btn"
            },
            // showCancelButton: true,
            confirmButtonText: t("buttons.ok"),
            cancelButtonText:  t("buttons.noKeepMe") ,
        });
        if(result.isConfirmed){
          dispatch(deleteAcc({router})).then((res:any)=>{
            if(res?.payload?.status == 200){
              router.replace("/")
            }
          })
        }
    }
  return (
    <AuthWrapper isAuthed>
      <div className='w-full text-[#C21D20]'>
        <li onClick={handleLogout}>
          <span className='flex items-center gap-2 w-full px-5 py-4 text-base font-semibold leading-[130%] cursor-pointer'>
            <LogoutAccIcon/>
            {t("NAV.logout")}
          </span>
        </li>
        <li onClick={handleDelete}>
          <span className='flex items-center gap-2 w-full px-5 py-4 text-base font-semibold leading-[130%] cursor-pointer'>
            <DeleteAccIcon/>
            {t("NAV.deleteAccount")}
          </span>
        </li>
      </div>
    </AuthWrapper>
  )
}

export default AccountBtns;