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

import { Toast as CoreToast } from '@shoptet/ui-core-web';

import type { Level } from '../../types';
import { H2 } from '../Typography/H2/H2';

export interface SystemMessageProps {
  level: Level;
  /**
   * The title of the system message.
   */
  title?: string;
  /**
   * The description or content of the system message.
   */
  description?: React.ReactNode;
  /**
   * Slot for additional controls or actions related to the system message.
   */
  controls?: React.ReactNode;
  /**
   * Function to render the description content.
   */
  renderDescription?: (children: Exclude<ReactNode, false | null | undefined>) => React.ReactNode;
}

export const SystemMessage: React.FC<SystemMessageProps> = ({
  level,
  title,
  description,
  controls,
  renderDescription,
  ...rest
}) => {
  rest satisfies Record<PropertyKey, never>;

  const safeRenderDescription =
    typeof renderDescription === 'function'
      ? renderDescription
      : (children: Exclude<ReactNode, false | null | undefined>) => <p>{children}</p>;
  const renderedDescription = description && safeRenderDescription(description);

  return (
    <CoreToast open>
      <CoreToast.Root className={classNames('systemMessage', `systemMessage--${level}`)}>
        <div className='systemMessage__content'>
          <div className='systemMessage__text'>
            {title && (
              <CoreToast.Title unwrapped>
                {({ props: { id } }) => (
                  <H2 id={id} divider={false}>
                    {title}
                  </H2>
                )}
              </CoreToast.Title>
            )}
            {renderedDescription && (
              <CoreToast.Description className='systemMessage__textDescription'>
                {renderedDescription}
              </CoreToast.Description>
            )}
          </div>
          <div className='systemMessage__buttons'>{controls}</div>
        </div>
      </CoreToast.Root>
    </CoreToast>
  );
};