'use client'
import MainContext from "@/app/contexts/mainContext";
import authAxios from "@/utils/axios";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React, { useContext } from "react";
import toast from "react-hot-toast";

const AccountSidebar = () => {
  const router = useRouter()
  const { setToken } = useContext(MainContext)
  const logoutFn = async () => {
    const response = await authAxios.post('/account/logout/')
    if (response.status == 200) {
      localStorage.removeItem('token')
      setToken(null)
      toast.success(response.data.message)
      router.push('/accounts/login')
    } 
    console.log(response)
  }
  return (
    <aside className="bg-white shadow-md overflow-x-auto md:w-64 md:min-h-screen">
      <div className="flex md:flex-col">

        <nav className="flex md:flex-col whitespace-nowrap">
          <Link
            href="/accounts/profile"
            className="block py-2 px-4 text-gray-700 hover:bg-gray-200"
          >
            <span className="inline-block mr-2">👤</span> My profile
          </Link>
          <Link
            href="/accounts/profile/orders"
            className="block py-2 px-4 text-gray-700 hover:bg-gray-200"
          >
            <span className="inline-block mr-2">📦</span> Orders{" "}
          </Link>
          {/* <Link
            href="/accounts/profile/addresses"
            className="block py-2 px-4 text-gray-700 hover:bg-gray-200"
          >
            <span className="inline-block mr-2">📍</span> Addresses{" "}
            <span className="ml-2 inline-block bg-gray-200 rounded-full px-2 py-1 text-xs">
              1
            </span>
          </Link> */}
          <Link
            href="/accounts/profile/change-password"
            className="block py-2 px-4 text-gray-700 hover:bg-gray-200"
          >
            <span className="inline-block mr-2">🔑</span> Change password
          </Link>
          <button
            onClick={()=> logoutFn()}
            className="block py-2 px-4 text-gray-700 hover:bg-gray-200 pr-80"
          >
            <span className="inline-block mr-2">🚪</span> Logout
          </button>
        </nav>
      </div>
      <style jsx>{`
        @media (max-width: 768px) {
          aside {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
          }
          aside::-webkit-scrollbar {
            display: none;
          }
          aside {
            -ms-overflow-style: none;
            scrollbar-width: none;
          }
        }
      `}</style>
    </aside>
    
  );
};

export default AccountSidebar;