<script lang="ts">
  import { DynamicSettings } from './dynamicSettings.ts';
  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
  import { updateSettings } from './actions.ts';

  // types
  interface Props {
    settings: { name: string; value: string }[];
  }

  type SettingsInput = {
    name: string;
    entries: (
      | {
          name: string;
          type: 'checkbox';
          value: boolean;
          onChange: (value: boolean) => void;
        }
      | {
          name: string;
          type: 'text';
          value: string;
          onChange: (value: string) => void;
        }
      | {
          name: string;
          type: 'textarea';
          value: string;
          onChange: (value: string) => void;
        }
    )[];
  }[];

  // inputs
  const { settings }: Props = $props();

  const dynamicSettings = new DynamicSettings(
    settings.reduce((prev, curr) => Object.assign(prev, { [curr.name]: curr.value }), {})
  );

  let changes = $state<{ [k: string]: string | null }>(dynamicSettings.getChanges());

  // consts
  const settingsInput: SettingsInput = [
    {
      name: 'Anmeldung',
      entries: [
        {
          name: 'Aktiviert',
          type: 'checkbox',
          value: dynamicSettings.signupEnabled(),
          onChange: dynamicSettings.signupSetEnabled
        },
        {
          name: 'Text unter dem Anmelde Button',
          type: 'textarea',
          value: dynamicSettings.signupInfoText(),
          onChange: dynamicSettings.signupSetInfoText
        },
        {
          name: 'Text, wenn die Anmeldung deaktiviert ist',
          type: 'textarea',
          value: dynamicSettings.signupDisabledText(),
          onChange: dynamicSettings.signupSetDisabledText
        },
        {
          name: 'Subtext, wenn die Anmeldung deaktiviert ist',
          type: 'textarea',
          value: dynamicSettings.signupDisabledSubtext(),
          onChange: dynamicSettings.signupSetDisabledSubtext
        }
      ]
    }
  ];

  // callbacks
  function onSaveSettingsClick() {
    $confirmPopupState = {
      title: 'Änderungen speichern?',
      message: 'Sollen die Änderungen gespeichert werden?',
      onConfirm: async () => {
        if (!(await updateSettings(changes))) return;
        dynamicSettings.setChanges();
        changes = {};
      }
    };
  }
</script>

<div class="h-full flex flex-col items-center justify-between">
  <div class="grid grid-cols-2 w-full">
    {#each settingsInput as setting (setting.name)}
      <div class="mx-12">
        <div class="divider">{setting.name}</div>
        <div class="flex flex-col gap-5">
          {#each setting.entries as entry (entry.name)}
            <label class="flex justify-between">
              <span class="mt-[.125rem] text-sm w-1/2">{entry.name}</span>
              <div class="w-1/2">
                {#if entry.type === 'checkbox'}
                  <input
                    type="checkbox"
                    class="toggle"
                    onchange={(e) => {
                      entry.onChange(e.currentTarget.checked);
                      changes = dynamicSettings.getChanges();
                    }}
                    checked={entry.value}
                  />
                {:else if entry.type === 'text'}
                  <input
                    type="text"
                    class="input input-bordered"
                    onchange={(e) => {
                      entry.onChange(e.currentTarget.value);
                      changes = dynamicSettings.getChanges();
                    }}
                    value={entry.value}
                  />
                {:else if entry.type === 'textarea'}
                  <textarea
                    class="textarea"
                    value={entry.value}
                    onchange={(e) => {
                      entry.onChange(e.currentTarget.value);
                      changes = dynamicSettings.getChanges();
                    }}
                  ></textarea>
                {/if}
              </div>
            </label>
          {/each}
        </div>
      </div>
    {/each}
  </div>
  <div>
    <button
      class="btn btn-success mt-auto mb-8"
      class:btn-disabled={Object.keys(changes).length === 0}
      onclick={onSaveSettingsClick}>Speichern</button
    >
  </div>
</div>
