import { Button, Icon, Modal } from '@8base/boost';
import React, { useCallback } from 'react';

import css from './document-preview.module.css';
import { getUploadedOnText } from './utils';

// -- TYPES

interface IChildrenOpts {
  args: {
    filename: string;
    previewUrl: string;
    createdAt: string;
    downloadUrl: string;
  };
  onClose: () => void;
}

// -- CONSTANTS

export const DOCUMENT_PREVIEW_ID = 'DOCUMENT_PREVIEW_ID';

// -- MAIN

function DocumentPreview() {
  const modalRender = useCallback(
    ({ args, onClose }: IChildrenOpts) => (
      <div className={css.wrapper}>
        <div className={css.header}>
          <div>
            {/* tslint:disable-next-line: jsx-no-lambda */}
            <button className={css['back-btn']} onClick={() => onClose()}>
              <Icon className={css['back-btn-icon']} name="ArrowLeft" />
              <span>Back</span>
            </button>
          </div>

          <div className={css.info}>
            <div className={css.filename}>{args.filename || '-'}</div>
            <div className={css.date}>{getUploadedOnText(args.createdAt)}</div>
          </div>

          {args.downloadUrl && (
            <div>
              <Button
                tagName="a"
                href={args.downloadUrl}
                target="_blank"
                rel="noopener noreferrer"
              >
                Download
              </Button>
            </div>
          )}
        </div>

        <iframe
          className={css['preview-frame']}
          src={args.previewUrl}
          title={args.filename}
        />
      </div>
    ),
    [],
  );

  return <Modal id={DOCUMENT_PREVIEW_ID}>{modalRender}</Modal>;
}

DocumentPreview.id = DOCUMENT_PREVIEW_ID;

export default DocumentPreview;