import React from 'react';
import classNames from 'classnames';

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

import { Divider } from '../Divider/Divider';
import { IconButton } from '../IconButton/IconButton';
import { getTypographyProps } from '../Typography/getTypographyProps';

export interface NestedNavigationHeaderInheritedDivProps extends SafeOmit<
  React.HTMLAttributes<HTMLDivElement>,
  'children' | 'className' | 'title'
> {}

export interface NestedNavigationHeaderProps extends NestedNavigationHeaderInheritedDivProps {}

export function NestedNavigationHeader({ ...rest }: NestedNavigationHeaderProps) {
  rest satisfies Exact<NestedNavigationHeaderInheritedDivProps, typeof rest>;

  const { onBack } = useNestedNavigationContext();
  const canGoBack = Boolean(onBack);

  return (
    <div {...rest} className='nestedNavigationHeader'>
      <div
        className={classNames('nestedNavigationHeader__row', {
          'nestedNavigationHeader__row--top': !canGoBack,
          'nestedNavigationHeader__row--child': canGoBack,
        })}
      >
        <CoreNestedNavigation.BackButton unwrapped>
          {({ props }) => (
            <IconButton
              {...props}
              icon='shp-back'
              // TODO: Replace with tertiary variant https://github.com/shoptet/cms4/issues/41944
              variant='secondary'
              size='sm'
              iconSize='sm'
              ghost
            />
          )}
        </CoreNestedNavigation.BackButton>
        <CoreNestedNavigation.Title
          level={2}
          className={classNames(
            getTypographyProps({ appearance: 'h3', divider: false }).className,
            'nestedNavigationHeader__title',
            { 'nestedNavigationHeader__title--indented': !canGoBack }
          )}
        >
          {({ state }) => state.title}
        </CoreNestedNavigation.Title>
        <CoreNestedNavigation.CloseButton unwrapped>
          {({ props }) => (
            <IconButton
              {...props}
              icon='shp-cross'
              // TODO: Replace with tertiary variant https://github.com/shoptet/cms4/issues/41944
              variant='secondary'
              size='md'
              ghost
            />
          )}
        </CoreNestedNavigation.CloseButton>
      </div>
      <Divider />
    </div>
  );
}