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

export function AuthMethodPostSetup({ addAuthMethod, cancel, configured }: AuthMethodSetupProps): VNode {
  const [fullName, setFullName] = useState("");
  const [street, setStreet] = useState("");
  const [city, setCity] = useState("");
  const [postcode, setPostcode] = useState("");
  const [country, setCountry] = useState("");

  const addPostAuth = () => {
    const challengeJson = {
      full_name: fullName,
      street,
      city,
      postcode,
      country,
    };
    addAuthMethod({
      authentication_method: {
        type: "post",
        instructions: `Letter to address in postal code ${postcode}`,
        challenge: encodeCrock(stringToBytes(canonicalJson(challengeJson))),
      },
    });
  };

  const errors = !fullName ? 'The full name is missing' : (
    !street ? 'The street is missing' : (
      !city ? 'The city is missing' : (
        !postcode ? 'The postcode is missing' : (
          !country ? 'The country is missing' : undefined
        )
      )
    )
  )
  return (
    <AnastasisClientFrame hideNav title="Add postal authentication">
      <p>
        For postal letter authentication, you need to provide a postal
        address. When recovering your secret, you will be asked to enter a
        code that you will receive in a letter to that address.
      </p>
      <div>
        <TextInput
          grabFocus
          label="Full Name"
          bind={[fullName, setFullName]}
        />
      </div>
      <div>
        <TextInput
          label="Street"
          bind={[street, setStreet]}
        />
      </div>
      <div>
        <TextInput
          label="City" bind={[city, setCity]}
        />
      </div>
      <div>
        <TextInput
          label="Postal Code" bind={[postcode, setPostcode]}
        />
      </div>
      <div>
        <TextInput
          label="Country"
          bind={[country, setCountry]}
        />
      </div>

      {configured.length > 0 && <section class="section">
        <div class="block">
          Your postal code:
        </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 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={addPostAuth}>Add</button>
        </span>
      </div>
    </AnastasisClientFrame>
  );
}