'use client';

import { createContext, useContext, useEffect, useState } from 'react';
import { ToastContainer, Slide } from 'react-toastify';

interface UIState {
  sidebarOpen: boolean;
  setSidebarOpen: (v: boolean) => void;
  toggleSidebar: () => void;
}

const UIContext = createContext<UIState>({
  sidebarOpen: true,
  setSidebarOpen: () => { },
  toggleSidebar: () => { },
});

export function UIProvider({ children }: { children: React.ReactNode }) {
  // Open by default on desktop, closed on mobile. Resolved on mount.
  const [sidebarOpen, setSidebarOpen] = useState(true);

  useEffect(() => {
    const mobile = window.matchMedia('(max-width: 767px)').matches;
    setSidebarOpen(!mobile);
  }, []);

  const toggleSidebar = () => setSidebarOpen((v) => !v);

  return (
    <UIContext.Provider value={{ sidebarOpen, setSidebarOpen, toggleSidebar }}>
      {children}
      <ToastContainer
        position="top-right"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="colored"
        transition={Slide}
      />
    </UIContext.Provider>
  );
}

export const useUI = () => useContext(UIContext);