import type { PropsWithChildren } from 'react';
import classNames from 'classnames';

import type { SafeOmit } from '@shoptet/utils';

import type { TextAlign, TypographyAppearance } from '../../tokens/types';
import type { SafeExtract, Variant } from '../../types';

/** @inheritdoc */
export interface TypographyOwnProps extends PropsWithChildren {
  /**
   * Text alignment.
   * @default 'left'
   */
  align?: TextAlign;
  /**
   * Visual appearance of the text.
   */
  appearance?: TypographyAppearance;
  /**
   * Additional class name.
   * @internal
   */
  className?: string;
  /**
   * Adds a divider after the text.
   * @default false
   */
  divider?: boolean;
  /**
   * Unique identifier.
   *
   * Useful for anchor links to headings.
   */
  id?: string;
  /**
   * Truncate text with ellipsis.
   * The element must be either block or within flex or grid container.
   * @default false
   */
  truncate?: boolean;
  /**
   * Sets text color variant
   */
  variant?: SafeExtract<Variant, 'primary' | 'secondary' | 'tertiary' | 'inverted'>;
}

export interface PublicTypographyProps extends SafeOmit<TypographyOwnProps, 'divider' | 'className'> {}

/**
 * Builds the common visual props for typography components and forwards remaining props.
 */
export function getTypographyProps<P extends TypographyOwnProps>({
  className,
  id,
  appearance,
  align = 'left',
  variant,
  truncate = false,
  divider = false,
  children,
  ...rest
}: P) {
  return {
    ...rest,
    id,
    className: classNames(className, 'typography', {
      typography__headline1: appearance === 'h1',
      typography__headline2: appearance === 'h2',
      typography__headline3: appearance === 'h3',
      typography__headline4: appearance === 'h4',
      typography__headline5: appearance === 'h5',
      typography__bodyCopyL: appearance === 'lg',
      typography__bodyCopyLB: appearance === 'strong-lg',
      typography__bodyCopyM: appearance === 'md',
      typography__bodyCopyMB: appearance === 'strong-md',
      typography__bodyCopyS: appearance === 'sm',
      typography__bodyCopySB: appearance === 'strong-sm',
      'typography--left': align === 'left',
      'typography--center': align === 'center',
      'typography--right': align === 'right',
      'typography--primary': variant === 'primary',
      'typography--secondary': variant === 'secondary',
      'typography--tertiary': variant === 'tertiary',
      'typography--inverted': variant === 'inverted',
      'typography--truncate': truncate,
      'typography--divider': divider,
    }),
    children,
  };
}