import { FC, useEffect, useState } from 'react';
import { UniformSlot } from '@uniformdev/next-app-router/component';
import { ArrowIcon } from '@/components/ui/_icons';
import { resolveColor } from '@/utils/colorPalette';
import { cn } from '@/utils/styling';
import { NavigationGroupParameters, NavigationGroupProps } from '.';

type NavigationGroupMobileContentProps = Pick<NavigationGroupProps, 'context' | 'slots'> &
  Pick<NavigationGroupParameters, 'backgroundColor'> & {
    isOpen: boolean;
    onClose: () => void;
  };

const useHeaderHeight = () => {
  const [headerHeight, setHeaderHeight] = useState(0);

  useEffect(() => {
    const header = document.getElementById('mobile-header');
    if (header) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setHeaderHeight(header.offsetHeight);
    }
  }, []);

  return headerHeight;
};

export const NavigationGroupMobileContent: FC<NavigationGroupMobileContentProps> = ({
  isOpen,
  backgroundColor,
  slots,
  onClose,
}) => {
  const headerHeight = useHeaderHeight();
  const bg = resolveColor(backgroundColor, 'background');

  return (
    <div
      style={{ ...bg.style, top: headerHeight }}
      className={cn('fixed left-0 right-0 bottom-0 z-10 w-full pt-4', bg.className, {
        hidden: !isOpen,
        block: isOpen,
      })}
    >
      <button onClick={onClose} className="w-max rotate-180 px-4">
        <ArrowIcon />
      </button>

      <div className="flex flex-col items-center gap-y-4 p-4">
        <UniformSlot slot={slots.links} />
      </div>
    </div>
  );
};