import React, { forwardRef } from 'react';

import { NestedNavigation as CoreNestedNavigation } from '@shoptet/ui-core-web';
import type { Exact, SafeOmit } from '@shoptet/utils';

import { Icon } from '../Icon/Icon';
import type { IconName } from '../Icon/IconName';

export interface NestedNavigationItemOwnProps {
  /** The row's label. */
  label: string;
  /** Optional leading icon. */
  icon?: IconName;
  /** Drills into the `NestedNavigation.Level` with this id. */
  to: string;
  disabled?: boolean;
}

export interface NestedNavigationItemInheritedDivProps extends SafeOmit<
  React.HTMLAttributes<HTMLButtonElement>,
  'children' | 'className' | 'onClick' | 'onSelect'
> {}

export interface NestedNavigationItemProps
  extends NestedNavigationItemOwnProps, NestedNavigationItemInheritedDivProps {}

export const NestedNavigationItem = forwardRef<HTMLButtonElement, NestedNavigationItemProps>(
  function NestedNavigationItem({ label, icon, to, disabled, ...rest }, ref) {
    rest satisfies Exact<NestedNavigationItemInheritedDivProps, typeof rest>;

    return (
      <CoreNestedNavigation.Item {...rest} ref={ref} to={to} disabled={disabled} className='nestedNavigationItem'>
        <span className='nestedNavigationItem__row'>
          <span className='nestedNavigationItem__labelGroup'>
            {icon && (
              <span className='nestedNavigationItem__icon'>
                <Icon icon={icon} size='sm' variant='primary' />
              </span>
            )}
            <span className='nestedNavigationItem__label'>{label}</span>
          </span>
          <span className='nestedNavigationItem__chevron'>
            <Icon icon='shp-arrow-right' size='md' variant='secondary' />
          </span>
        </span>
      </CoreNestedNavigation.Item>
    );
  }
);

NestedNavigationItem.displayName = 'NestedNavigation.Item';