/*
 This file is part of GNU Taler
 (C) 2021 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

/**
*
* @author Sebastian Javier Marchano (sebasjm)
*/
import { Fragment, h, render, VNode } from 'preact';
import { render as renderToString } from 'preact-render-to-string';
import "../css/pure-min.css";
import "../css/style.css";

/**
 * This page creates a payment request QR code
 * 
 * It will build into a mustache html template for server side rendering
 * 
 * server side rendering params:
 *  - order_summary
 *  - contract_terms
 *  - refund_amount
 * 
 * request params:
 *  - refund_amount
 *  - contract_terms 
 *  - order_summary
 */

interface Props {
  order_summary?: string;
  refund_amount?: string;
  contract_terms?: string;
}

function Head({ order_summary }: { order_summary?: string }): VNode {
  return <Fragment>
    <meta http-equiv="content-type" content="text/html; UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <noscript>
      <meta http-equiv="refresh" content="1" />
    </noscript>
    <title>Status of your order for {order_summary ? order_summary : `{{ order_summary }}`}</title>
  </Fragment>
}

export function ShowOrderDetails({ order_summary, refund_amount }: Props): VNode {
  return <Fragment>
    <h1>Order details</h1>

    <div>
      This is the default status page for your order for <b>{order_summary ? order_summary : `{{ order_summary }}`}</b>.
    </div>


    <h2>Refund status</h2>
    <div>
      The merchant has granted you refunds on the purchase of <b>{refund_amount ? refund_amount : `{{ refund_amount }}`}</b>.
    </div>

    <h2>Full contract details</h2>

    {/* <!-- FIXME #6459: expand the contract JSON in all its glory here --> */}
    <pre>
      {/* {{{contract_terms!stringify }}} */}
    </pre>

  </Fragment>

}

export function mount(): void {
  try {
    const fromLocation = new URL(window.location.href).searchParams
    const os = fromLocation.get('order_summary') || undefined;
    if (os) {
      render(<Head order_summary={os} />, document.head);
    }

    const ra = fromLocation.get('refund_amount') || undefined;
    const ct = fromLocation.get('contract_terms') || undefined;

    render(<ShowOrderDetails
      contract_terms={ct}
      order_summary={os} refund_amount={ra}
    />, document.body);

  } catch (e) {
    console.error("got error", e);
    document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
  }
}

export function buildTimeRendering(): { head: string, body: string } {
  return {
    head: renderToString(<Head />),
    body: renderToString(<ShowOrderDetails />)
  }
}
