/* eslint-disable @typescript-eslint/camelcase */
import {
  canonicalJson,
  encodeCrock,
  stringToBytes
} from "@gnu-taler/taler-util";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { TextInput } from "../../../components/fields/TextInput";
import { AuthMethodSetupProps } from "../AuthenticationEditorScreen";
import { AnastasisClientFrame } from "../index";

export function AuthMethodIbanSetup({ addAuthMethod, cancel, configured }: AuthMethodSetupProps): VNode {
  const [name, setName] = useState("");
  const [account, setAccount] = useState("");
  const addIbanAuth = (): void => addAuthMethod({
    authentication_method: {
      type: "iban",
      instructions: `Wire transfer from ${account} with holder ${name}`,
      challenge: encodeCrock(stringToBytes(canonicalJson({
        name, account
      }))),
    },
  });
  const errors = !name ? 'Add an account name' : (
    !account ? 'Add an account IBAN number' : undefined
  )
  return (
    <AnastasisClientFrame hideNav title="Add bank transfer authentication">
      <p>
        For bank transfer authentication, you need to provide a bank
        account (account holder name and IBAN). When recovering your
        secret, you will be asked to pay the recovery fee via bank
        transfer from the account you provided here.
      </p>
      <div>
        <TextInput
          label="Bank account holder name"
          grabFocus
          placeholder="John Smith"
          bind={[name, setName]} />
        <TextInput
          label="IBAN"
          placeholder="DE91100000000123456789"
          bind={[account, setAccount]} />
      </div>
      {configured.length > 0 && <section class="section">
        <div class="block">
          Your bank accounts:
        </div><div class="block">
          {configured.map((c, i) => {
            return <div key={i} class="box" style={{ display: 'flex', justifyContent: 'space-between' }}>
              <p style={{ marginBottom: 'auto', marginTop: 'auto' }}>{c.instructions}</p>
              <div><button class="button is-danger" onClick={c.remove} >Delete</button></div>
            </div>
          })}
        </div></section>}
      <div>
        <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
          <button class="button" onClick={cancel}>Cancel</button>
          <span data-tooltip={errors}>
            <button class="button is-info" disabled={errors !== undefined} onClick={addIbanAuth}>Add</button>
          </span>
        </div>
      </div>
    </AnastasisClientFrame>
  );
}