import React, { useMemo } from 'react';
import { ToastConfig, ToastType } from '@wix/bex-core';
import { StatusToast } from '@wix/design-system';

interface ManageTagsNotificationProps {
  toastConfig: ToastConfig;
  onClose: (toastConfig: ToastConfig) => unknown;
  dataHook?: string;
}

const toastTypeToStatus: {
  [key in ToastType]?: 'success' | 'error' | 'warning' | 'info';
} = {
  STANDARD: 'info',
  PREMIUM: 'info',
  SUCCESS: 'success',
  WARNING: 'warning',
  ERROR: 'error',
};

export const ManageTagsNotification = ({
  toastConfig,
  onClose,
  dataHook,
}: ManageTagsNotificationProps) => {
  const actionElement = useMemo(() => {
    if (!toastConfig.action?.text) {
      return undefined;
    }

    const handleClick = () => {
      toastConfig.action?.onClick?.();

      if (toastConfig.action?.removeToastOnClick) {
        onClose(toastConfig);
      }
    };

    return (
      <StatusToast.Action
        dataHook="manage-tags-modal-notification-action"
        onClick={handleClick}
      >
        {toastConfig.action.text}
      </StatusToast.Action>
    );
  }, [toastConfig, onClose]);

  return (
    <StatusToast
      key={toastConfig.biName ?? toastConfig.message}
      dataHook={dataHook}
      status={toastTypeToStatus[toastConfig.type ?? 'STANDARD']}
      dismissible
      onDismiss={() => onClose(toastConfig)}
      action={actionElement}
    >
      <span data-hook="manage-tags-modal-notification-message">
        {toastConfig.message}
      </span>
    </StatusToast>
  );
};
