import SideNavbar from "@/Components/SideNavbar"
import Sidebar from "@/Components/Sidebar"
import { Head, usePage } from "@inertiajs/react"
import FlashMessage from "@/Components/FlashMessage"
import { SidebarInset, SidebarProvider } from "@/Components/ui/sidebar"
import { Home, Users, Settings, Folder } from "lucide-react"
import { getCookie } from "@/utils/format"

function AuthenticatedLayout({ title, children, Breadcrumb = null, auth }) {
  const sidebarMenu = useSidebarMenu()
  const defaultOpen = getCookie("sidebar_state") === "true"

  return (
    <SidebarProvider defaultOpen={defaultOpen}>
      <Head title={title} />
      <Sidebar menu={sidebarMenu} />
      <SidebarInset>
        <main className="w-full">
          <SideNavbar Breadcrumb={Breadcrumb} isNotification={true} />
          <div className="sm:px-4 py-1 w-full">
            <FlashMessage />
            {children}
          </div>
        </main>
      </SidebarInset>
    </SidebarProvider>
  )
}

const useSidebarMenu = () => {
  const { props } = usePage()
  const { user } = props.auth

  let sidebarMenu = [
    {
      title: "Dashboard",
      fa_icon: "fas fa-tachometer-alt fa-fw",
      icon: Home,
      link: "/admin/dashboard",
    },
    {
      title: "Data Master",
      icon: Folder,
      dropdown: [
        {
          title: "Perusahaan",
          link: "/admin/companies"
        },
        {
          title: "Departemen",
          link: "/admin/departments"
        },
        {
          title: "Kategori",
          link: "/admin/categories"
        },
        {
          title: "Bank",
          link: "/admin/banks"
        },
        {
          title: "Rekening Bank",
          link: "/admin/user_banks"
        },
        // {
        //   title: "Vendor",
        //   link: "/admin/vendors"
        // },
        // {
        //   title: "Saldo",
        //   link: "/admin/balances"
        // },
      ]
    },
    {
      title: "Pengguna",
      icon: Users,
      link: "/admin/users",
    },
    {
      "title": "Anggaran",
      "fa_icon": "fas fa-money-bill-wave",
      "icon_provider": "fontawesome",
      "link": "/admin/budgets"
    },
    {
      "title": "Transaksi",
      "fa_icon": "fas fa-exchange-alt",
      "icon_provider": "fontawesome",
      "link": "/admin/transactions"
    },
    {
      "title": "Pembayaran",
      "fa_icon": "fas fa-file-invoice-dollar",
      "icon_provider": "fontawesome",
      "link": "/admin/payments"
    },
    // {
    //   "title": "Summary Report",
    //   "fa_icon": "fas fa-file-invoice-dollar",
    //   "icon_provider": "fontawesome",
    //   "link": "/admin/reports",
    // },
    // {
    //   "title": "Notifikasi",
    //   "fa_icon": "fas fa-bell",
    //   "icon_provider": "fontawesome",
    //   "link": "/admin/notifications"
    // },
    {
      title: "Konfigurasi",
      fa_icon: "fas fa-gear",
      icon: Settings,
      dropdown: [
        {
          title: "Pengaturan Umum",
          link: "/admin/configuration",
        },
        {
          "title": "Konfigurasi Kode",
          "fa_icon": "fas fa-code-branch",
          "icon_provider": "fontawesome",
          "link": "/admin/code_configs"
        },
        {
          "title": "Log Persetujuan",
          "fa_icon": "fas fa-clipboard-check",
          "icon_provider": "fontawesome",
          "link": "/admin/approval_logs"
        },
      ],
    },
  ]

  let routes = []

  if (["user"].includes(user?.role)) {
    routes = [
      "/admin/dashboard",
      "/admin/budgets"
    ]
  }
  if (["manager"].includes(user?.role)) {
    routes = [
      "/admin/dashboard",
      "/admin/users",
      "/admin/budgets",
    ]
  }
  if (["director"].includes(user?.role)) {
    routes = [
      "/admin/dashboard",
      "/admin/users",
      "/admin/budgets",
      // "/admin/transactions",
      "/admin/departments",
      "/admin/companies",
      "/admin/categories",
      "/admin/banks",
      "/admin/vendors",
      "/admin/reports"
    ]
  }

  if (props?.active_session?.department?.is_finance) {
    if (["manager"].includes(user?.role)) {
      routes = [
        "/admin/dashboard",
        "/admin/payments",
        "/admin/banks",
        "/admin/user_banks",
      ]
    }
    if (["director"].includes(user?.role)) {
      routes = [
        "/admin/dashboard",
        "/admin/users",
        "/admin/payments",
        "/admin/departments",
        "/admin/companies",
        "/admin/categories",
        "/admin/banks",
        "/admin/user_banks",
        "/admin/vendors",
        "/admin/reports"
      ]
    }
  }

  if (routes.length > 0) {
    sidebarMenu = sidebarMenu.filter((menu) => {
      if (!menu.link && !!menu.dropdown) {
        menu.dropdown = menu.dropdown.filter((subMenu) => {
          return routes.includes(subMenu.link)
        })

        return menu.dropdown.length > 0
      }

      return routes.includes(menu.link)
    })
  }

  return sidebarMenu
}
export default AuthenticatedLayout
