import { createSignal, For, Match, Show, Switch } from "solid-js";
import styles from "./Timer.module.css";

export const TIME_UNITS = ["s", "m", "h", "d"] as const;
export type Timer = {
  title: string;
  options: {
    time: number;
    unit: (typeof TIME_UNITS)[number];
  }[];
  backgroundColor: string;
  onTill: number | null;
  secondsLeftText: string;
  extraStopActions: { title: string }[];
};

export default function Timer(props: Timer) {
  const [onTill, setOnTill] = createSignal(props.onTill);
  const [unit, setUnit] = createSignal<(typeof TIME_UNITS)[number]>(
    TIME_UNITS[1],
  );
  const [formattedTime, setFormattedTime] = createSignal("");
  const [disabled, setDisabled] = createSignal(onTill() !== null);
  const [customValue, setCustomValue] = createSignal<number | "">("");

  let _intervalId = null;
  function toggleAutoUpdate() {
    if (_intervalId === null) {
      updateTime();
      _intervalId = setInterval(updateTime, 1000);
    } else {
      clearInterval(_intervalId);
      _intervalId = null;
    }
  }
  if (props.onTill !== null) {
    toggleAutoUpdate();
  }
  function updateTime() {
    const s = Math.floor(onTill() - Date.now() / 1000);
    const days = Math.floor(s / (24 * 3600));
    const hours = Math.floor((s % (24 * 3600)) / 3600);
    const minutes = Math.floor((s % 3600) / 60);
    const seconds = s % 60;

    let text = "";
    if (days > 0) {
      text += days + "d : ";
    }
    if (hours > 0 || text.length > 0) {
      text += hours + "h : ";
    }
    if (minutes > 0 || text.length > 0) {
      text += minutes + "m : ";
    }
    if (seconds > 0 || text.length > 0) {
      text += seconds + "s";
    }
    setFormattedTime(text);
  }
  function startStopClick() {
    const val = customValue();
    if (disabled() === false && val !== "") {
      optionClick({ time: val, unit: unit() });
    } else if (disabled() === true) {
      setDisabled(false);
      setOnTill(null);
      toggleAutoUpdate();
    }
  }

  function optionClick(option: Timer["options"][number]) {
    setDisabled(true);
    let newOnTill = Math.floor(Date.now() / 1000);
    if (option.unit === "s") {
      newOnTill += option.time;
    } else if (option.unit === "m") {
      newOnTill += option.time * 60;
    } else if (option.unit === "h") {
      newOnTill += option.time * 3600;
    } else {
      newOnTill += option.time * 3600 * 24;
    }
    setOnTill(newOnTill);
    toggleAutoUpdate();
  }

  function extraStopClick(act: Timer["extraStopActions"][number]) {
    // Some api call for the extra
    startStopClick();
  }
  return (
    <div class={styles.cont}>
      <h2>{props.title}</h2>

      <div class={styles.customOption}>
        <input
          type="number"
          value={customValue()}
          on:input={(e) =>
            setCustomValue(e.target.value ? parseFloat(e.target.value) : "")
          }
          disabled={disabled()}
          min="1"
        />
        <div class={styles.units}>
          <For each={TIME_UNITS}>
            {(u) => (
              <span
                on:click={() => (disabled() ? null : setUnit(u))}
                classList={{
                  [styles.selectedUnit]: unit() === u,
                  [styles.notSelectedUnit]: unit() !== u,
                  [styles.darkgray]: disabled() === true,
                }}
              >
                {u}
              </span>
            )}
          </For>
        </div>
        <button
          class={styles.customOptionBtn}
          on:click={startStopClick}
          disabled={
            disabled()
              ? false
              : customValue() === "" || (customValue() as number) <= 0
          }
          style={{ "background-color": disabled() ? "red" : "green" }}
        >
          {disabled() ? "Wyłącz" : "Włącz"}
        </button>
        {/*<Show when={disabled() === true}>*/}
        <For each={props.extraStopActions}>
          {(act) => (
            <button
              disabled={disabled() === false}
              on:click={[extraStopClick, act]}
              class={styles.extraStopBtn}
            >
              {act.title}
            </button>
          )}
        </For>
        {/*</Show>*/}
      </div>

      <div class={styles.timeLeft}>
        <Switch>
          <Match when={onTill() === null}>
            <span>Wyłączone</span>
            <h2> </h2>
          </Match>
          <Match when={onTill() > 0}>
            <span>{props.secondsLeftText} </span>
            <h2>{formattedTime()}</h2>
          </Match>
        </Switch>
      </div>

      <div class={styles.options}>
        <For each={props.options}>
          {(option) => (
            <button
              class={styles.option}
              on:click={[optionClick, option]}
              style={{ "background-color": props.backgroundColor }}
              disabled={disabled()}
            >
              {option.time} {option.unit}
            </button>
          )}
        </For>
      </div>
    </div>
  );
}