'use client';
import React, { useMemo } from 'react';
import HeaderProfile from './HeaderProfile';
import Link from 'next/link';
import CommonImage from '../common/CommonImage';
import { Sheet } from '@/components/ui/sheet';
import { Text } from '@/components/ui/text';
import DashboardMenu from './DashboardMenu';
import Notifications from './Notifications';
import WorkSpace from './WorkSpace';
import { VC_FE_URL, WOSA_ADMIN_URL } from '@/config/site-config';
import BookmarkDialog from './BookmarkDialog';
import { useSelector } from 'react-redux';
import { usePathname } from 'next/navigation';
import { createSelector } from '@reduxjs/toolkit';
import { UnknownRecord } from '@/types';

type IconType = {
  id: string;
  src: string;
  alt: string;
  width: number;
  height: number;
  className?: string;
  link?: string;
  isToggleable?: boolean;
};

const icons: IconType[] = [
  {
    id: 'logo',
    src: '/header/logo-dashboard.png',
    alt: 'logo',
    width: 32,
    height: 32,
    link: `${WOSA_ADMIN_URL}dashboard`,
  },
  {
    id: 'nav-toggle',
    src: '/header/nav-toggle.png',
    className: 'dashboard-menu-left',
    alt: 'nav-toggle',
    width: 20,
    height: 20,
  },
  {
    id: 'bookmark',
    src: '/header/bookmark_regular.webp',
    alt: 'bookmark',
    width: 20,
    height: 20,
    isToggleable: true,
  },
  {
    id: 'home',
    src: '/header/home-icon.png',
    alt: 'home',
    width: 20,
    height: 20,
    link: `${WOSA_ADMIN_URL}dashboard`,
  },
];

const selectSession = (state: UnknownRecord) => state.session;
const selectMenusState = (state: UnknownRecord) => state.menus;

const selectMenuBookmarks = createSelector(
  [selectSession],
  (session) => session.menuBookmarks || [],
);

const selectMenus = createSelector(
  [selectMenusState],
  (menus) => menus.items || [],
);

const findPageTitle = (
  menus: UnknownRecord[],
  pathname: string,
  title: string,
) => {
  try {
    const accessibleMenus: UnknownRecord[] = menus;

    for (const group of accessibleMenus) {
      for (const menu of group.menus || []) {
        for (const action of menu.actions || []) {
          const BASEURL = action.action?.startsWith('vc_')
            ? VC_FE_URL
            : WOSA_ADMIN_URL;
          const actionHref = `${BASEURL}${menu.controller}/${action.action}`;
          if (actionHref.endsWith(pathname) || actionHref === pathname) {
            return action.title;
          }
        }
      }
    }
  } catch (err) {
    console.warn('Failed to parse accessibleMenuItems', err);
  }

  return title || document.title;
};

const HeaderSection: React.FC = () => {
  const pathname = usePathname();

  const menuBookmarks = useSelector(selectMenuBookmarks);
  const menus = useSelector(selectMenus);

  const currentPathBookmark = useMemo(() => {
    const currentPath = pathname.replace(/^\/+/, '');
    const bookmark = menuBookmarks.find(
      (page: UnknownRecord) => page.menu_link === currentPath,
    );

    if (bookmark) {
      return bookmark;
    }

    const solidTitle = findPageTitle(menus, pathname, 'title');
    return {
      href: currentPath,
      menu_name: solidTitle,
      title: solidTitle,
      menu_link: currentPath,
      id: 0,
    };
  }, [menuBookmarks, pathname, menus]);

  const renderedIcons = useMemo(
    () =>
      icons.map((icon) => {
        if (icon.className === 'dashboard-menu-left') {
          return (
            <Sheet key={icon.id}>
              <DashboardMenu />
            </Sheet>
          );
        }

        if (icon.isToggleable) {
          return <BookmarkDialog key={icon.id} props={currentPathBookmark} />;
        }

        return icon.link ? (
          <Link
            key={icon.id}
            href={icon.link}
            rel="noopener noreferrer"
            className={'icon-' + icon.id}
          >
            <CommonImage
              src={icon.src}
              classname={'icon-' + icon.id}
              alt={icon.alt}
              width={icon.width}
              height={icon.height}
            />
          </Link>
        ) : (
          <CommonImage
            key={icon.id}
            src={icon.src}
            classname={'icon-' + icon.id}
            alt={icon.alt}
            width={icon.width}
            height={icon.height}
          />
        );
      }),
    [currentPathBookmark],
  );

  return (
    <header className="main_header">
      <Text className="container-widget mx-auto flex items-center justify-between">
        <Text className="header_left_side flex items-center gap-3">
          {renderedIcons}
        </Text>
        <Text className="header_right_side flex items-center">
          <Notifications />
          <WorkSpace />
          <HeaderProfile />
        </Text>
      </Text>
    </header>
  );
};

export default HeaderSection;