import type { ReactNode } from 'react';
import { ROUTES } from '@/router/routes.js';
import { CopyToClipboardButton, InsertDocument, PopUpDrawer } from '../index.js';

interface Props {
  chargeId?: string;
  close: () => void;
  onChange?: () => void;
}

export const InsertDocumentModal = ({
  chargeId,
  close,
  onChange = (): void => {},
}: Props): ReactNode => {
  if (!chargeId) {
    return null;
  }

  return (
    <PopUpDrawer
      modalSize="40%"
      position="bottom"
      title={
        <div className="flex flex-row mx-3 pt-3 sm:text-1xl gap-10">
          <h1 className="sm:text-2xl font-small text-gray-900">Insert Document:</h1>
          <div className="flex flex-row gap-2">
            Charge ID: {chargeId}
            <CopyToClipboardButton
              isLink
              content={`${window.location.origin}${ROUTES.CHARGES.DETAIL(chargeId)}`}
            />
          </div>
        </div>
      }
      opened={!!chargeId}
      onClose={close}
    >
      <InsertDocument chargeId={chargeId} closeModal={close} onChange={onChange} />
    </PopUpDrawer>
  );
};