import { AnimateSharedLayout, AnimatePresence, motion } from 'framer-motion';
import { joinClassNames } from '@vizality/util/dom';
import { getModule } from '@vizality/webpack';
import { useToggle } from '@vizality/hooks';
import React, { memo } from 'react';

/**
 * Content sidebar that can be used as a side navigation or to hold content.
 * @component
 * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
 */
export default memo(({ type, children, className }) => {
  const { topPill } = getModule('selected', 'item', 'topPill');
  const { tabBar } = getModule('tabBar', 'item');

  type = type || topPill;

  return (
    <AnimateSharedLayout>
      <AnimatePresence>
        <div className={joinClassNames('vz-tab-bar', tabBar, type, className)} role='tabbar'>
          {children}
        </div>
      </AnimatePresence>
    </AnimateSharedLayout>
  );
});

/**
 * Tab bar navigation item.
 * @component
 * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
 */
export const NavItem = memo(({ icon, route, separator = false, disabled, iconOnly, selected, onClick, className, children, ...other }) => {
  selected = typeof selected === 'boolean' ? selected : vizality.api.routes.getLocation()?.pathname?.startsWith(route);
  const { item, themed, selected: _selected, disabled: _disabled } = getModule('selected', 'item', 'topPill');
  const { item: item2 } = getModule('tabBar', 'item');

  return (
    <>
      <div
        {...other}
        className={joinClassNames('vz-tab-bar-item', className, item, item2, themed, { [_selected]: selected, [_disabled]: disabled })}
        role='tab'
        vz-selected={selected && ''}
        vz-disabled={disabled && ''}
        onClick={evt => {
          try {
            if (disabled) {
              return;
            }
            if (onClick) {
              onClick(evt);
            }
            if (route) {
              return vizality.api.routes.navigateTo(route);
            }
          } catch (err) {

          }
        }}
      >
        {children}
      </div>
      {separator && (
        <div className={separator} />
      )}
    </>
  );
});
