// @flow
import * as React from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import Modal from 'react-modal';
import { Button } from '@box/blueprint-web';
import type { BoxItem } from '../../common/types/core';

import { CLASS_MODAL_CONTENT, CLASS_MODAL_OVERLAY, CLASS_MODAL, TYPE_FOLDER } from '../../constants';

import messages from '../common/messages';

type Props = {
    appElement: HTMLElement,
    isLoading: boolean,
    isOpen: boolean,
    item: BoxItem,
    onCancel: any,
    onDelete: any,
    parentElement: HTMLElement,
};

const DeleteConfirmationDialog = ({
  appElement,
  isLoading,
  isOpen,
  item,
  onCancel,
  onDelete,
  parentElement,
}: Props) => {
    const { formatMessage } = useIntl();
    const message = item.type === TYPE_FOLDER ? messages.deleteDialogFolderText : messages.deleteDialogFileText;
    return (
        <Modal
            appElement={appElement}
            className={CLASS_MODAL_CONTENT}
            contentLabel={formatMessage(messages.deleteDialogLabel)}
            isOpen={isOpen}
            onRequestClose={onCancel}
            overlayClassName={CLASS_MODAL_OVERLAY}
            parentSelector={() => parentElement}
            portalClassName={`${CLASS_MODAL} be-modal-delete`}
        >
            <FormattedMessage {...message} values={{ name: item.name }} />
            <div className="be-modal-btns">
                <Button
                    loading={isLoading}
                    loadingAriaLabel={formatMessage(messages.loading)}
                    onClick={onDelete}
                    size="large"
                    variant="primary"
                >
                    {formatMessage(messages.delete)}
                </Button>
                <Button autoFocus disabled={isLoading} onClick={onCancel} size="large" variant="secondary">
                    {formatMessage(messages.cancel)}
                </Button>
            </div>
        </Modal>
    );
};

export default DeleteConfirmationDialog;