import React, { ReactNode } from 'react';
import { Box, EmptyState, EmptyStateProps } from '@wix/design-system';
import { observer } from 'mobx-react-lite';

export interface EmptyStateBaseProps
  extends EmptyStateBasePrivateProps,
    Omit<Partial<EmptyStateProps>, 'title' | 'subtitle' | 'image'> {
  /**
   * Overrides the default title.
   * @external
   */
  title: string;
  /**
   * Overrides the default subtitle.
   * @external
   */
  subtitle: string;
  /**
   * Overrides the default image.
   * Accepts a custom `ReactElement` or boolean value.
   * Pass `false` to hide the default image.
   * @external
   */
  image?: boolean | ReactNode;
  children?: ReactNode;
  cta?: ReactNode;
  /**
   * Adds another custom call to action button.
   * Pass a [TextButton](https://www.docs.wixdesignsystem.com/?path=/story/components-actions--textbutton) component.
   * @external
   */
  customCta?: ReactNode;
}

export interface EmptyStateBasePrivateProps {
  title: string;
  subtitle: string;
  cta?: ReactNode;
  image?: string | ReactNode;
}

function _EmptyStateBase(props: EmptyStateBaseProps) {
  const { children, customCta, title, subtitle, cta, image, ...rest } = props;

  let child;

  if (cta || customCta) {
    child = (
      <Box gap="SP5" verticalAlign="middle">
        {customCta}
        {cta}
      </Box>
    );
  }

  if (children) {
    child = (
      <>
        {child}
        {children}
      </>
    );
  }

  return (
    <EmptyState
      title={title}
      subtitle={subtitle}
      theme="page-no-border"
      image={image ? <div style={{ display: 'flex' }}>{image}</div> : undefined}
      {...rest}
    >
      {child}
    </EmptyState>
  );
}

export const EmptyStateBase = observer(_EmptyStateBase);