import * as React from 'react';
import Modal from 'react-modal';
import noop from 'lodash/noop';
import { FormattedMessage, useIntl } from 'react-intl';
import { Button, Modal as BlueprintModal, Text } from '@box/blueprint-web';

import ShareAccessSelect from '../common/share-access-select';
import { CLASS_MODAL_CONTENT, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../constants';
import type { BoxItem } from '../../common/types/core';

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

import './ShareDialog.scss';

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

const ShareDialog = ({
     appElement,
     canSetShareAccess,
     isLoading,
     isOpen,
     item,
     onCancel,
     onShareAccessChange,
     parentElement,
 }: Props) => {
    const { formatMessage } = useIntl();
    let textInput = null;

    const copy = () => {
        if (textInput instanceof HTMLInputElement) {
            textInput.select();
            document.execCommand('copy');
        }
    };

    const { shared_link: sharedLink }: BoxItem = item;
    const { url } = sharedLink || {
        url: formatMessage(messages.shareDialogNone),
    };

    return (
        <Modal
            appElement={appElement}
            className={CLASS_MODAL_CONTENT}
            contentLabel={formatMessage(messages.shareDialogLabel)}
            isOpen={isOpen}
            onRequestClose={onCancel}
            overlayClassName={CLASS_MODAL_OVERLAY}
            parentSelector={() => parentElement}
            portalClassName={`${CLASS_MODAL} be-modal-share`}
        >
            <BlueprintModal.Body>
                <Text as="label">
                    <FormattedMessage {...messages.shareDialogText} />
                </Text>
                <div className="be-modal-input-group">
                    <input
                        ref={input => {
                            textInput = input;
                        }}
                        onChange={noop}
                        type="text"
                        value={url}
                    />
                    <Button autoFocus className="be-modal-button-copy" onClick={copy} variant="primary">
                        {formatMessage(messages.copy)}
                    </Button>
                </div>

                <BlueprintModal.Footer className="be-modal-btns">
                    <ShareAccessSelect
                        canSetShareAccess={canSetShareAccess}
                        className="bce-shared-access-select"
                        item={item}
                        onChange={onShareAccessChange}
                    />
                    <Button
                        loading={isLoading}
                        loadingAriaLabel={formatMessage(messages.loading)}
                        onClick={onCancel}
                        size="large"
                        variant="secondary"
                    >
                        {formatMessage(messages.close)}
                    </Button>
                </BlueprintModal.Footer>
            </BlueprintModal.Body>
        </Modal>
    );
};

export default ShareDialog;