import { VNode, h } from "preact";
import { Pages } from "../pages.js";
import { AmlRecords, AmlState } from "../types.js";
import { InputChoiceHorizontal } from "../handlers/InputChoiceHorizontal.js";
import { createNewForm } from "../handlers/forms.js";
import { TranslatedString } from "@gnu-taler/taler-util";
import { amlStateConverter as amlStateConverter } from "./CaseDetails.js";
import { useState } from "preact/hooks";
import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
import { useOfficer } from "../hooks/useOfficer.js";

const response: AmlRecords = {
  records: [
    {
      current_state: 0,
      h_payto: "QWEQWEQWEQWEWQE",
      rowid: 1,
      threshold: "USD 100",
    },
    {
      current_state: 1,
      h_payto: "ASDASDASD",
      rowid: 1,
      threshold: "USD 100",
    },
    {
      current_state: 2,
      h_payto: "ZXCZXCZXCXZC",
      rowid: 1,
      threshold: "USD 1000",
    },
    {
      current_state: 0,
      h_payto: "QWEQWEQWEQWEWQE",
      rowid: 1,
      threshold: "USD 100",
    },
    {
      current_state: 1,
      h_payto: "ASDASDASD",
      rowid: 1,
      threshold: "USD 100",
    },
    {
      current_state: 2,
      h_payto: "ZXCZXCZXCXZC",
      rowid: 1,
      threshold: "USD 1000",
    },
  ].map((e, idx) => {
    e.rowid = idx;
    e.threshold = `${e.threshold}${idx}`;
    return e;
  }),
};

function doFilter(
  list: typeof response.records,
  filter: AmlState | undefined,
): typeof response.records {
  if (filter === undefined) return list;
  return list.filter((r) => r.current_state === filter);
}

export function Cases() {
  const officer = useOfficer();
  if (officer.state !== "ready") {
    return <HandleAccountNotReady officer={officer} />;
  }
  const form = createNewForm<{
    state: AmlState;
  }>();
  const initial = { state: AmlState.pending };
  const [list, setList] = useState(doFilter(response.records, initial.state));
  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={initial}
            onUpdate={(v) => {
              setList(doFilter(response.records, v.state));
            }}
            onSubmit={(v) => {}}
          >
            <form.InputChoiceHorizontal
              name="state"
              label={"Filter" as TranslatedString}
              converter={amlStateConverter}
              choices={[
                {
                  label: "Pending" as TranslatedString,
                  value: AmlState.pending,
                },
                {
                  label: "Frozen" as TranslatedString,
                  value: AmlState.frozen,
                },
                {
                  label: "Normal" as TranslatedString,
                  value: 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">
            <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">
                  {list.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: AmlState): VNode => {
                            switch (state) {
                              case 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 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 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>
  );
}