import {
  MessageModalLayout,
  ModalProps,
  Text,
  MessageModalLayoutProps,
  TableActionCellSecondaryAction,
} from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { ModalWrapper } from '../CollectionModal';
import { ConditionalModalState } from '@wix/bex-core';

export interface MessageActionModalProps
  extends Partial<MessageModalLayoutProps> {
  state: ConditionalModalState<unknown>;
  onAfterClose?: ModalProps['onAfterClose'];
  /**
   * A [TableActionCellSecondaryAction](https://www.docs.wixdesignsystem.com/?activeTab=API&path=%2Fstory%2Fcomponents-api-components--tableactioncell) object to customize the "Delete" secondary action.<br>
   */
  actionProps?: Partial<TableActionCellSecondaryAction>;
}

function _MessageActionModal({
  state,
  content,
  onAfterClose,
  primaryButtonOnClick,
  secondaryButtonOnClick,
  onCloseButtonClick,
  ...rest
}: MessageActionModalProps) {
  const { modal } = state;

  return (
    <ModalWrapper
      state={modal}
      onAfterClose={() => {
        state.afterClose();
        onAfterClose?.();
      }}
    >
      <MessageModalLayout
        dataHook="collection-action-modal"
        {...rest}
        onCloseButtonClick={(e) => {
          modal.close();
          onCloseButtonClick?.(e);
        }}
        primaryButtonOnClick={() => {
          modal.confirm();
          primaryButtonOnClick?.();
        }}
        secondaryButtonOnClick={
          rest.secondaryButtonText
            ? () => {
                modal.decline();
                secondaryButtonOnClick?.();
              }
            : undefined
        }
        content={
          typeof content === 'string' ? (
            <Text dataHook="action-modal-content">{content}</Text>
          ) : (
            content
          )
        }
      />
    </ModalWrapper>
  );
}

export const MessageActionModal = observer(_MessageActionModal);