<script lang="ts">
  import { rulesPopupState, rulesPopupRead } from './RulesPopup.ts';
  import { rules } from '../../../rules.ts';
  import { popupState } from '@components/popup/Popup.ts';
  import { onDestroy } from 'svelte';

  const modalTimeoutSeconds = 30;

  let modalElem: HTMLDialogElement;

  let modalTimer = $state<ReturnType<typeof setInterval> | null>(null);
  let modalSecondsOpen = $state(import.meta.env.PROD ? 0 : modalTimeoutSeconds);

  const cancel = rulesPopupState.subscribe((value) => {
    if (value == 'open') {
      modalElem.show();
      modalTimer = setInterval(() => modalSecondsOpen++, 1000);
    } else if (value == 'closed') {
      clearInterval(modalTimer!);
    }
  });

  onDestroy(cancel);
</script>

<dialog
  class="modal"
  onclose={() => {
    if ($rulesPopupState !== 'accepted') $rulesPopupState = 'closed';
  }}
  bind:this={modalElem}
>
  <form method="dialog" class="modal-box flex flex-col max-h-[90%] max-w-[95%] md:max-w-[90%] lg:max-w-[75%]">
    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    <div class="overflow-auto mt-5">
      <div class="mb-4">
        <div class="collapse collapse-arrow">
          <input type="checkbox" autocomplete="off" checked />
          <div class="collapse-title">
            <p>0. Vorwort</p>
          </div>
          <div class="collapse-content">
            <p>{rules.header}</p>
            <p class="mt-1 text-[.75rem]">{rules.footer}</p>
          </div>
          <span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
        </div>
        {#each rules.sections as section, i (section.title)}
          <div class="collapse collapse-arrow">
            <input type="checkbox" autocomplete="off" />
            <div class="collapse-title">
              <p>{i + 1}. {section.title}</p>
            </div>
            <div class="collapse-content">
              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
              {@html section.content}
            </div>
          </div>
          <span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
        {/each}
      </div>
    </div>
    <div
      class="relative w-min"
      title={modalSecondsOpen < modalTimeoutSeconds
        ? `Die Regeln können in ${Math.max(modalTimeoutSeconds - modalSecondsOpen, 0)} Sekunden akzeptiert werden`
        : ''}
    >
      <div class="absolute top-0 left-0 h-full w-full overflow-hidden rounded-lg">
        <div
          style="width: {Math.min((modalSecondsOpen / modalTimeoutSeconds) * 100, 100)}%"
          class="h-full bg-neutral"
        ></div>
      </div>
      <button
        class="btn bg-transparent z-[1] relative"
        class:btn-active={modalSecondsOpen < modalTimeoutSeconds}
        class:cursor-default={modalSecondsOpen < modalTimeoutSeconds}
        onclick={(e) => {
          if (modalSecondsOpen < modalTimeoutSeconds) {
            e.preventDefault();
            $popupState = {
              type: 'info',
              title: 'Regeln',
              message: 'Bitte lies die Regeln aufmerksam durch. Du kannst erst in einigen Sekunden fortfahren.'
            };
            return;
          }
          $rulesPopupRead = true;
          $rulesPopupState = 'accepted';
        }}>Akzeptieren</button
      >
    </div>
  </form>
  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
    <button class="!cursor-default">close</button>
  </form>
</dialog>
