import { useId } from '@radix-ui/react-id';
import React, { useState } from 'react';
import clsx from 'clsx';

import { McolGrid, Stack } from '../../system';
import { RasaLogoAligned } from '..';
import { useApp } from '../../app';
import { Badge } from '../ui/badge';
import * as css from './site-mobile-nav.module.scss';
import { MotionDialog } from '../../motion/dialog';

function ToggleButton({ isOpen, setIsOpen, toggleFn = () => setIsOpen(!isOpen), targetId, ...rest }) {
  return (
    <button {...rest} type="button" onClick={toggleFn} aria-expanded={isOpen} aria-controls={targetId} />
  );
}

/*
  TODO

  - create a `useMedia` hook, to catch resize events which should CLOSE this menu
  - add a close button with an `Icon`, like on L3AI etc
  - complete the styling of this menu
 */

export function SiteMobileNav({ items }) {
  const { Link } = useApp();
  const [isOpen, setIsOpen] = useState(false);
  const modalId = useId();

  return (
    <>
      <ToggleButton className={css.mobileNavTrigger} targetId={modalId} {...{ isOpen, setIsOpen }}>
        <span className={css.toggleBars}></span>
      </ToggleButton>
      <MotionDialog
        className={css.siteMobileNav}
        label="site navigation"
        targetId={modalId}
        {...{ isOpen, setIsOpen }}
        overlayMotion={{ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }}
        contentMotion={{ initial: { y: 20 }, animate: { y: 0 }, exit: { y: 20 } }}
      >
        <McolGrid py={30} cols={{ _: 2, s: 3, m: 4, ml: 4 }}>
          <Link className="d-block" href="/">
            <RasaLogoAligned className="fg-brand" style={{ width: 60 }} />
          </Link>
          {/* TODO: add this, with an offset icon
          <DialogBtn className="ml-auto" targetId={modalId} {...{ isOpen, setIsOpen }}>
            X
          </DialogBtn> */}
          {items.map((link) => {
            if (!link.items) {
              return (
                <li key={link.text}>
                  <Link href={link.href} rootRelative className={clsx(css.linkCustom, 'link')}>
                    {link.text}
                  </Link>
                </li>
              );
            }

            return (
              <Stack gapY={20} className="cell" key={link.text}>
                <h4 className="trim fg-tone-12">{link.text}</h4>
                <Stack as="ul" gap="5" role="list" mt={10} className="trim fg-tone-10" fz={15}>
                  {link.items?.map((subitem) => {
                    return (
                      <li key={subitem.text}>
                        <Link href={subitem.href} rootRelative className={clsx(css.linkCustom, 'link')}>
                          {subitem.text}
                          {subitem.xtra && <Badge ml={10}>{subitem.xtra}</Badge>}
                        </Link>
                      </li>
                    );
                  })}
                </Stack>
              </Stack>
            );
          })}
        </McolGrid>
      </MotionDialog>
    </>
  );
}