import React, { useState } from 'react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import backgroundImg from '../../assets/images/modalBg.png';
import { Icons } from '@/components/icons';
import apis from '@/utils/apis';
import { useRouter } from 'next/navigation';
import { destroyCookie } from 'nookies';
import { COOKIES_USER_ACCESS_TOKEN } from '@/context/actionTypes';

import { useGlobalContext } from '@/context/Provider';

export function LogoutDialog({ isOpen, onClose }: any) {
  const router = useRouter();
  const { logout } = useGlobalContext();

  const handleLogout = async () => {
    logout();
    onClose();
  };
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="h-[400px]  border-none bg-transparent">
        <div
          className="relative"
          style={{
            backgroundImage: `url(${backgroundImg.src})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center'
          }}
        >
          <div className="absolute right-[188px] top-[-20px]">
            <Icons.LogoutItem />
          </div>
          <div className="mt-[20%] flex h-[70%] w-full flex-col items-center justify-center gap-4">
            <div className="flex flex-col items-center justify-center p-4 text-center">
              <span className="text-[22px] font-[600] text-[#121212]">
                Log out
              </span>
              <span className="text-[18px] font-[400] text-[#999999]">
                Are you sure you want to sign out your app?
              </span>
            </div>
            <div className="flex w-full flex-row justify-between gap-2 px-4">
              <button
                className="w-[50%] rounded-lg border border-[#333] bg-[#fff] p-4 text-[18px] font-[600] text-[#121212]"
                onClick={onClose}
              >
                Cancel
              </button>{' '}
              <button
                className="w-[50%] rounded-lg border-0 bg-[#FAC01A] p-4 text-[18px] font-[600] text-[#fff]"
                onClick={handleLogout}
              >
                Sign Out
              </button>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

export default LogoutDialog;