import { TranslatedString } from "@gnu-taler/taler-util";
import { VNode, h } from "preact";
import { useState } from "preact/hooks";
import { createNewForm } from "../handlers/forms.js";
import { useCases } from "../hooks/useCases.js";
import { useOfficer } from "../hooks/useOfficer.js";
import { Pages } from "../pages.js";
import { AmlExchangeBackend } from "../types.js";
import { amlStateConverter } from "./CaseDetails.js";
import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
import { buildQuerySignature } from "../account.js";
import { handleNotOkResult } from "../utils/errors.js";
import { useTranslationContext } from "@gnu-taler/web-util/browser";

export function Cases() {
  const officer = useOfficer();
  const { i18n } = useTranslationContext();
  if (officer.state !== "ready") {
    return <HandleAccountNotReady officer={officer} />;
  }
  const form = createNewForm<{
    state: AmlExchangeBackend.AmlState;
  }>();

  const signature =
    officer.state === "ready"
      ? buildQuerySignature(officer.account.signingKey)
      : undefined;

  const initial = AmlExchangeBackend.AmlState.pending;
  const [stateFilter, setStateFilter] = useState(initial);
  const list = useCases(officer.account.accountId, stateFilter, signature);

  if (!list.ok && !list.loading) {
    return handleNotOkResult(i18n)(list);
  }
  const records = list.loading ? [] : list.data.records
  return (
    <div>
      <div class="px-4 sm:px-6 lg:px-8">
        <div class="sm:flex sm:items-center">
          <div class="sm:flex-auto">
            <h1 class="text-base font-semibold leading-6 text-gray-900">
              Cases
            </h1>
            <p class="mt-2 text-sm text-gray-700">
              A list of all the account with the status
            </p>
          </div>
          <form.Provider
            initialValue={{ state: stateFilter }}
            onUpdate={(v) => {
              setStateFilter(v.state ?? initial);
            }}
            onSubmit={(v) => {}}
          >
            <form.InputChoiceHorizontal
              name="state"
              label={"Filter" as TranslatedString}
              converter={amlStateConverter}
              choices={[
                {
                  label: "Pending" as TranslatedString,
                  value: AmlExchangeBackend.AmlState.pending,
                },
                {
                  label: "Frozen" as TranslatedString,
                  value: AmlExchangeBackend.AmlState.frozen,
                },
                {
                  label: "Normal" as TranslatedString,
                  value: AmlExchangeBackend.AmlState.normal,
                },
              ]}
            />
          </form.Provider>
        </div>
        <div class="mt-8 flow-root">
          <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            {!records.length ? (
              <div>empty result </div>
            ) : (
              <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                <Pagination />
                <table class="min-w-full divide-y divide-gray-300">
                  <thead>
                    <tr>
                      <th
                        scope="col"
                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                      >
                        Account Id
                      </th>
                      <th
                        scope="col"
                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                      >
                        Status
                      </th>
                      <th
                        scope="col"
                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                      >
                        Threshold
                      </th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-gray-200 bg-white">
                    {records.map((r) => {
                      return (
                        <tr class="hover:bg-gray-100 ">
                          <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500 ">
                            <div class="text-gray-900">
                              <a
                                href={Pages.details.url({ account: r.h_payto })}
                                class="text-indigo-600 hover:text-indigo-900"
                              >
                                {r.h_payto}
                              </a>
                            </div>
                          </td>
                          <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
                            {((state: AmlExchangeBackend.AmlState): VNode => {
                              switch (state) {
                                case AmlExchangeBackend.AmlState.normal: {
                                  return (
                                    <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
                                      Normal
                                    </span>
                                  );
                                }
                                case AmlExchangeBackend.AmlState.pending: {
                                  return (
                                    <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-green-600/20">
                                      Pending
                                    </span>
                                  );
                                }
                                case AmlExchangeBackend.AmlState.frozen: {
                                  return (
                                    <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-green-600/20">
                                      Frozen
                                    </span>
                                  );
                                }
                              }
                            })(r.current_state)}
                          </td>
                          <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-900">
                            {r.threshold}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
                <Pagination />
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function Pagination() {
  return (
    <nav class="flex items-center justify-between px-4 sm:px-0">
      <div class="-mt-px flex w-0 flex-1">
        <a
          href="#"
          class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        >
          <svg
            class="mr-3 h-5 w-5 text-gray-400"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z"
              clip-rule="evenodd"
            />
          </svg>
          Previous
        </a>
      </div>
      <div class="hidden md:-mt-px md:flex">
        <a
          href="#"
          class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        >
          1
        </a>
        {/* <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" --> */}
        <a
          href="#"
          class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500"
          aria-current="page"
        >
          2
        </a>
        <a
          href="#"
          class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        >
          3
        </a>
        <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500">
          ...
        </span>
        <a
          href="#"
          class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        >
          8
        </a>
        <a
          href="#"
          class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        >
          9
        </a>
        <a
          href="#"
          class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        >
          10
        </a>
      </div>
      <div class="-mt-px flex w-0 flex-1 justify-end">
        <a
          href="#"
          class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        >
          Next
          <svg
            class="ml-3 h-5 w-5 text-gray-400"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      </div>
    </nav>
  );
}