import type { AnchorHTMLAttributes, HTMLAttributes, ReactElement, ReactNode } from 'react';
import React from 'react';
import classNames from 'classnames';

import { Heading, useTranslations } from '@shoptet/ui-core-web';
import type { Exact, SafeOmit } from '@shoptet/utils';
import { destruct } from '@shoptet/utils';

import { Icon } from '../Icon/Icon';
import { Stack } from '../Stack/Stack';
import { getTypographyProps } from '../Typography/getTypographyProps';

import { dictionary } from './dictionary';

interface HTMLSectionAttributes extends SafeOmit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {}

export interface SectionOwnProps {
  /**
   * The content of the section.
   */
  children: React.ReactNode;
  /**
   * Slot for a tag element.
   */
  tag?: React.ReactNode;
  /**
   * Title of the section.
   * If provided, it will be rendered as an H1 element.
   * If you want to use a different heading level, use the `tag` prop instead.
   */
  title?: string | ReactNode;
  /**
   * Additional content rendered inline next to the H1 title (e.g. a copy-to-clipboard button).
   * Only rendered when `title` is provided.
   */
  headerContent?: ReactNode;
  /**
   * Removes bottom and top padding.
   */
  noSpace?: boolean;
  /**
   * Sets flex-grow: 1 on the section.
   * Useful for sections that should fill the remaining space in a flex container.
   * @default false
   */
  grow?: boolean;
  /**
   * Slot for the link to the next page
   */
  next?: ReactElement | false | null | undefined;
  /**
   * Slot for the link to the previous page
   */
  previous?: ReactElement | false | null | undefined;
}

export interface SectionProps extends SectionOwnProps, HTMLSectionAttributes {}

export const Section = Object.assign(
  function Section({ children, tag, title, headerContent, noSpace, grow, previous, next, ...rest }: SectionProps) {
    rest satisfies Exact<HTMLSectionAttributes, typeof rest>;

    const titleElement = !!title && (
      <Heading level={1} {...getTypographyProps({ appearance: 'h1', className: 'section__headline' })}>
        {title}
      </Heading>
    );

    const prevNextLinksElement = !!(previous || next) && (
      <div className='section__navigationLinks'>
        {previous}
        {next}
      </div>
    );

    return (
      <div
        {...rest}
        className={classNames('section', {
          'section--no-space': noSpace,
          'section--grow': grow,
        })}
      >
        {tag}
        {(title || previous || next) && (
          <div className='section__header'>
            {prevNextLinksElement}
            {titleElement && headerContent ? (
              <Stack orientation='horizontal' align='center'>
                {titleElement}
                {headerContent}
              </Stack>
            ) : (
              titleElement
            )}
          </div>
        )}
        {children}
      </div>
    );
  },
  {
    Link: SectionLink,
  }
);

interface InheritedHTMLAnchorProps extends SafeOmit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'href'> {}

interface SectionLinkProps extends InheritedHTMLAnchorProps {
  label?: string;
  type: 'previous' | 'next';
  href?: string | false | null;
}

function SectionLink(props: SectionLinkProps) {
  const [{ label, type, href, ...ownProps }, rest] = destruct(props, ['label', 'type', 'href']);
  ownProps satisfies Record<PropertyKey, never>;
  rest satisfies Exact<InheritedHTMLAnchorProps, typeof rest>;

  const disabled = !href;
  const translations = useTranslations(dictionary);

  return (
    <a
      {...rest}
      aria-hidden={rest['aria-hidden'] ?? disabled}
      aria-disabled={rest['aria-disabled'] ?? disabled}
      aria-label={rest['aria-label'] ?? (label || translations[type])}
      className={classNames('section__navigationLink', {
        'section__navigationLink--disabled': disabled,
      })}
      href={href || undefined}
    >
      <Icon icon={type === 'previous' ? 'shp-back' : 'shp-next'} />
    </a>
  );
}