import ActionDialog from "@dashboard/components/ActionDialog";
import { buttonMessages } from "@dashboard/intl";
import { getStringOrPlaceholder } from "@dashboard/misc";
import { DialogContentText } from "@material-ui/core";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
import React from "react";
import { useIntl } from "react-intl";

import msgs from "./messages";

export interface AppActivateDialogProps {
  confirmButtonState: ConfirmButtonTransitionState;
  open: boolean;
  name?: string | null;
  onClose: () => void;
  onConfirm: () => void;
}

const AppActivateDialog: React.FC<AppActivateDialogProps> = ({
  confirmButtonState,
  open,
  name,
  onClose,
  onConfirm,
}) => {
  const intl = useIntl();

  const isNameMissing = name === null || name === "";

  const getMainText = () => {
    if (isNameMissing) {
      return intl.formatMessage(msgs.activateApp);
    }
    return intl.formatMessage(msgs.activateNamedApp, {
      name: <strong>{getStringOrPlaceholder(name)}</strong>,
    });
  };

  return (
    <ActionDialog
      confirmButtonLabel={intl.formatMessage(buttonMessages.activate)}
      confirmButtonState={confirmButtonState}
      open={open}
      onClose={onClose}
      onConfirm={onConfirm}
      title={intl.formatMessage(msgs.activateAppTitle)}
      variant="default"
    >
      <DialogContentText data-test-id="dialog-content">
        {getMainText()}
      </DialogContentText>
    </ActionDialog>
  );
};
AppActivateDialog.displayName = "AppActivateDialog";
export default AppActivateDialog;
