import type { ReactNode } from 'react';
import React from 'react';
import classNames from 'classnames';

import type { RichText } from '../../types';
import { isNativeHtmlStructure } from '../../utils/isNativeHtmlStructure';
import { isTruthyReactNode } from '../../utils/isTruthyNode';
import { onlyAllowedComponentsFactory } from '../../utils/onlyAllowedComponents';
import { Anchor } from '../Anchor/Anchor';
import type { ButtonProps } from '../Button/Button';
import { Button } from '../Button/Button';
import { Text } from '../Typography/Text/Text';

const onlyAllowedComponents = onlyAllowedComponentsFactory(new Set([Button, Anchor]));

const primaryButtonProps: ButtonProps = { variant: 'primary', size: 'md' };
const secondaryButtonProps: ButtonProps = { variant: 'secondary', size: 'md' };

export interface ActionCardProps {
  /**
   * Buttons or Anchors to display on the card
   * @default undefined
   */
  buttons?: ({
    primaryButtonProps,
    secondaryButtonProps,
  }: {
    primaryButtonProps: ButtonProps;
    secondaryButtonProps: ButtonProps;
  }) => ReactNode;
  /**
   * Content to display on the card
   * @default undefined
   */
  children?: ReactNode;
  /**
   * Description to display on the card
   * @default undefined
   */
  description?: RichText;
  /**
   * If the card should be responsive
   * @default true
   */
  responsive?: boolean;
  /**
   * Tags to display on the card
   * @default undefined
   */
  tags?: ReactNode;
  /**
   * Header to display on the card
   * @default undefined
   */
  title?: ReactNode;
}

function maybeWrapInText(node: ReactNode) {
  return isNativeHtmlStructure(node) ? <Text>{node}</Text> : node;
}

export function ActionCard({
  tags,
  buttons: buttonsProp,
  children,
  description,
  responsive = true,
  title,
  ...rest
}: ActionCardProps) {
  const buttons = onlyAllowedComponents(buttonsProp?.({ primaryButtonProps, secondaryButtonProps }));

  return (
    <div
      {...rest}
      className={classNames('actionCard', {
        'actionCard--responsive': responsive,
      })}
    >
      {(isTruthyReactNode(title) || isTruthyReactNode(tags)) && (
        <div className='actionCard__header'>
          {isTruthyReactNode(tags) && <div className='actionCard__tags'>{maybeWrapInText(tags)}</div>}
          {isTruthyReactNode(title) && <div className='actionCard__title'>{maybeWrapInText(title)}</div>}
        </div>
      )}
      {isTruthyReactNode(description) && <div className='actionCard__description'>{maybeWrapInText(description)}</div>}
      {isTruthyReactNode(children) && <div className='actionCard__content'>{children}</div>}
      {isTruthyReactNode(buttons) && <div className='actionCard__buttons'>{buttons}</div>}
    </div>
  );
}