import * as React from 'react';
import { Modal } from 'react-bootstrap';

import { Attachment } from 'src/contrib/aidbox';

interface Props {}
interface State {
    previewModal: null | { url: string; isFile: boolean };
}

export class AttachmentPreviewModal extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);

        this.state = { previewModal: null };
    }

    public showPreview(attachment: File | Attachment) {
        if (attachment instanceof File) {
            this.setState({ previewModal: { url: URL.createObjectURL(attachment), isFile: true } });
        } else {
            this.setState({ previewModal: { url: attachment.url, isFile: false } });
        }
    }

    public render() {
        const { previewModal } = this.state;

        return (
            <Modal
                size="lg"
                show={!!previewModal}
                onHide={() => {
                    if (previewModal!.isFile) {
                        URL.revokeObjectURL(previewModal!.url);
                    }
                    this.setState({ previewModal: null });
                }}
                centered
            >
                {previewModal && (
                    <Modal.Body>
                        <img src={previewModal!.url} width="100%" />
                    </Modal.Body>
                )}
            </Modal>
        );
    }
}