import React from 'react';
import type { ReactElement } from 'react';
import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
import Icon from '../Icon';
import Typography from '../Typography';
import {
  StyledHeading,
  StyledIconWrapper,
  StyledWrapper,
} from './StyledHeading';
import type { IconName, IconProps } from '../Icon';
import { useDeprecation } from '../../utils/hooks';

interface SectionHeadingProps extends ViewProps {
  /**
   * Heading text.
   */
  text: string | ReactElement;
  /**
   * Name of the Icon.
   */
  icon?: IconName | ReactElement<IconProps>;
  /**
   * Right corner content
   */
  rightChildren?: ReactElement;
  /**
   * @deprecated fontSize will be removed in the next major release.
   * Size of the text.
   */
  fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
  /**
   * @deprecated fontWeight will be removed in the next major release.
   * Heading's font-weight.
   */
  fontWeight?: 'light' | 'regular' | 'semi-bold';
  /**
   * Visual intent color to apply to text.
   */
  intent?: 'subdued' | 'body' | 'primary';
  /**
   * Additional style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * Component size.
   */
  size?: 'small' | 'medium';
}

const ICON_SIZE_MAP = {
  small: 'small',
  medium: 'medium',
} as const;

const ICON_INTENT_MAP = {
  body: 'text',
  subdued: 'text',
  primary: 'primary',
} as const;

const SectionHeading = ({
  icon,
  text,
  rightChildren,
  fontSize = 'large',
  intent = 'body',
  fontWeight = 'regular',
  size = 'medium',
  style,
  testID,
}: SectionHeadingProps): ReactElement => {
  useDeprecation(
    `SectionHeading's fontSize prop is deprecated and will be removed in the next major release, please remove it.`,
    fontSize !== undefined
  );

  useDeprecation(
    `SectionHeading's fontWeight prop is deprecated and will be removed in the next major release, please remove it.`,
    fontWeight !== undefined
  );

  return (
    <StyledHeading themeSize={size} style={style} testID={testID}>
      <StyledWrapper>
        <StyledIconWrapper>
          {icon !== undefined &&
            (typeof icon === 'string' ? (
              <Icon
                icon={icon}
                size={ICON_SIZE_MAP[size]}
                intent={ICON_INTENT_MAP[intent]}
              />
            ) : (
              React.cloneElement(icon, {
                size: ICON_SIZE_MAP[size],
                intent: ICON_INTENT_MAP[intent],
                ...icon.props,
              })
            ))}
        </StyledIconWrapper>

        {size === 'small' ? (
          <Typography.Caption intent={intent}>{text}</Typography.Caption>
        ) : (
          <Typography.Body variant="small" intent={intent}>
            {text}
          </Typography.Body>
        )}
      </StyledWrapper>
      {rightChildren}
    </StyledHeading>
  );
};

export default SectionHeading;