/*
 This file is part of GNU Taler
 (C) 2025 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

import { AbsoluteTime } from "@gnu-taler/taler-util";
import { getHours, getMinutes, getSeconds, setHours } from "date-fns";
import { Fragment, VNode, h } from "preact";
import { useTranslationContext } from "../index.browser.js";

export function TimePicker({
  value,
  onChange,
  onConfirm,
}: {
  value: AbsoluteTime | undefined;
  onChange: (v: AbsoluteTime) => void;
  onConfirm: () => void;
}): VNode {
  const date = !value ? new Date() : new Date(AbsoluteTime.toStampMs(value));
  const hours = getHours(date) % 12;
  const minutes = getMinutes(date);
  const seconds = getSeconds(date);

  const { i18n } = useTranslationContext();

  return (
    <Fragment>
      <div class="flex flex-col bg-white rounded-t-sm  justify-around">
        {/* time selection */}
        <div
          id=""
          class="bg-[#3b71ca] dark:bg-zinc-700 h-24 rounded-t-lg p-12  flex flex-row items-center justify-center"
        >
          <div class="flex w-full justify-evenly">
            <div class="">
              <span class="relative h-full">
                <button
                  type="button"
                  class="py-1 px-3 text-[3.75rem] font-light leading-[1.2]  text-white opacity-[.54] border-none bg-transparent p-0  cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none "
                  style="pointer-events: none;"
                >
                  {new String(hours).padStart(2, "0")}
                </button>
              </span>
              <span
                type="button"
                class="font-light leading-[1.2]  text-[3.75rem] opacity-[.54] border-none bg-transparent p-0 text-white "
              >
                :
              </span>
              <span class="relative h-full">
                <button
                  type="button"
                  class="py-1 px-3 text-[3.75rem] font-light leading-[1.2]  text-white opacity-[.54] border-none bg-transparent p-0  cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none "
                >
                  {new String(minutes).padStart(2, "0")}
                </button>
              </span>
              <span
                type="button"
                class="font-light leading-[1.2]  text-[3.75rem] opacity-[.54] border-none bg-transparent p-0 text-white "
              >
                :
              </span>
              <span class="relative h-full">
                <button
                  type="button"
                  class="py-1 px-3 text-[3.75rem] font-light leading-[1.2]  text-white opacity-[.54] border-none bg-transparent p-0  cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none "
                >
                  {new String(seconds).padStart(2, "0")}
                </button>
              </span>
            </div>
            <div class="flex flex-col justify-center text-[18px] text-[#ffffff8a] ">
              <button
                type="button"
                class="py-1 px-3 bg-transparent border-none text-white cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none"
              >
                AM
              </button>
              <button
                type="button"
                class="py-1 px-3 bg-transparent border-none text-white cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none"
              >
                PM
              </button>
            </div>
          </div>
        </div>
        {/* clock */}
        <div
          id=""
          class="mt-2 min-w-[310px] max-w-[325px] min-h-[305px] overflow-x-hidden h-full flex justify-center mx-auto   flex-col items-center dark:bg-zinc-500"
        >
          <div class="relative rounded-[100%] w-[260px] h-[260px] cursor-default my-0 mx-auto bg-[#00000012] dark:bg-zinc-600/50 animate-[show-up-clock_350ms_linear]">
            <span class="top-1/2 left-1/2 w-[6px] h-[6px] -translate-y-1/2 -translate-x-1/2 rounded-[50%] bg-[#3b71ca] absolute"></span>
            <div
              class="bg-[#3b71ca] bottom-1/2 h-2/5 left-[calc(50%-1px)] rtl:!left-auto origin-[center_bottom_0] rtl:!origin-[50%_50%_0] w-[2px] absolute"
              style={{ transform: "rotateZ(60deg)", height: "calc(35% + 1px)" }}
            >
              {/* <div class="-top-[21px] -left-[15px] w-[4px] border-[14px] border-solid border-[#3b71ca] h-[4px] box-content rounded-[100%] absolute" style="background-color: rgb(25, 118, 210);"></div> */}
            </div>

            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 12).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 114px; bottom: 224px;"
            >
              <span>0</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 1).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 169px; bottom: 209.263px;"
            >
              <span>1</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 2).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              data-selected={true}
              style="left: 209.263px; bottom: 169px;"
            >
              <span>2</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 3).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 224px; bottom: 114px;"
            >
              <span>3</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 4).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 209.263px; bottom: 59px;"
            >
              <span>4</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 5).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 169px; bottom: 18.7372px;"
            >
              <span>5</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 6).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 114px; bottom: 4px;"
            >
              <span>6</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 7).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 59px; bottom: 18.7372px;"
            >
              <span>7</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 8).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 18.7372px; bottom: 59px;"
            >
              <span>8</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 9).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 4px; bottom: 114px;"
            >
              <span>9</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 10).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 18.7372px; bottom: 169px;"
            >
              <span>10</span>
            </span>
            <span
              onClick={() =>
                onChange(AbsoluteTime.fromStampMs(setHours(date, 11).getTime()))
              }
              class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal"
              style="left: 59px; bottom: 209.263px;"
            >
              <span>11</span>
            </span>
          </div>
        </div>
      </div>
      <div
        id=""
        class="rounded-b-lg flex justify-between items-center w-full h-[56px] px-[12px] bg-white dark:bg-zinc-500"
      >
        <div class="w-full flex justify-end">
          <button
            type="submit"
            onClick={onConfirm}
            class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          >
            <i18n.Translate>Confirm</i18n.Translate>
          </button>
        </div>
      </div>
    </Fragment>
  );
}
