import { Badge } from 'components/common';
import { ExternalLink } from 'components/router/ExternalLink';
import { StripeElements } from 'components/stripe/StripeElements';
import { InvoicePaymentError } from './InvoicePaymentError';

import { formatDate } from 'utils';

export const COLORS: Record<string, 'blue' | 'green' | 'gray'> = {
  open: 'blue',
  paid: 'green',
  void: 'gray',
};

export const InvoiceLink = ({
  status,
  number,
  pdfUrl,
  created,
}: {
  status: string;
  number: string;
  pdfUrl: string;
  created: string;
}) => {
  return (
    <div className="flex justifyBetween spacing2">
      <div>{formatDate(created)}</div>
      <div>{number}</div>
      <Badge className="fz12" color={COLORS[status]}>
        {status}
      </Badge>
      <ExternalLink className="link" href={pdfUrl}>
        pdf
      </ExternalLink>
    </div>
  );
};

export const OpenInvoice = (props: {
  invoiceId: string;
  status: string;
  number: string;
  pdfUrl: string;
  created: string;
}) => {
  return (
    <div
      className="rounded4"
      style={{
        marginLeft: -16,
        marginRight: -16,
        border: '1px solid var(--borderColor)',
      }}
    >
      <div
        className="padding4"
        style={{ borderBottom: '1px solid var(--borderColor)' }}
      >
        <InvoiceLink {...props} />
      </div>
      <div className="padding4">
        <StripeElements>
          <InvoicePaymentError invoiceId={props.invoiceId} />
        </StripeElements>
      </div>
    </div>
  );
};

export const InvoiceItem = (props: {
  invoiceId: string;
  status: string;
  number: string;
  pdfUrl: string;
  created: string;
}) => {
  if (props.status === 'open') {
    return <OpenInvoice {...props} />;
  } else {
    return <InvoiceLink {...props} />;
  }
};