import { Fragment, VNode } from "preact";
import { useState } from "preact/hooks";
import { QR } from "../components/QR";
import { ButtonBox, FontIcon, WalletBox } from "../components/styled";

export interface Props {
  reservePub: string;
  paytos: string[];
  onBack: () => void;
}

export function ReserveCreated({ reservePub, paytos, onBack }: Props): VNode {
  const [opened, setOpened] = useState(-1)
  return (
    <WalletBox>
      <section>
        <h2>Reserve created!</h2>
        <p>Now you need to send money to the exchange to one of the following accounts</p>
        <p>To complete the setup of the reserve, you must now initiate a wire transfer using the given wire transfer subject and crediting the specified amount to the indicated account of the exchange.</p>
      </section>
      <section>
        <ul>
          {paytos.map((href, idx) => {
            const url = new URL(href)
            return <li key={idx}><p>
              <a href="" onClick={(e) => { setOpened(o => o === idx ? -1 : idx); e.preventDefault() }}>{url.pathname}</a>
              {opened === idx && <Fragment>
                <p>If your system supports RFC 8905, you can do this by opening <a href={href}>this URI</a> or scan the QR with your wallet</p>
                <QR text={href} />
              </Fragment>}
            </p></li>
          })}
        </ul>
      </section>
      <footer>
        <ButtonBox onClick={onBack}><FontIcon>&#x2190;</FontIcon></ButtonBox>
        <div />
      </footer>
    </WalletBox>
  );
}