<script lang="ts">
  import Spacer from '$lib/Layout/Spacer.svelte';
  import { options } from '$lib/Notification/options';
  import root from '$lib/Utility/root';
  import identity from '$stores/identity';
  import settings from '$stores/settings';
  import { addNotification } from '$lib/Notification/store';
  import SettingHint from '../SettingHint.svelte';
  import locale from '$stores/locale';
  import settingsSyncTimes from '$stores/settingsSyncTimes';
</script>

{#if !$settings.settingsSync}
  <button
    onclick={() => {
      $settings.settingsSync = true;

      fetch(root(`/api/configuration?id=${$identity.id}`)).then((response) => {
        if (response.ok) {
          response.json().then((data) => {
            if (data && data.configuration) {
              $settings = data.configuration;

              addNotification(
                options({
                  heading: 'Pulled remote configuration'
                })
              );
            } else {
              fetch(root(`/api/configuration`), {
                method: 'PUT',
                body: JSON.stringify($settings)
              }).then((response) => {
                if (response.ok)
                  addNotification(
                    options({
                      heading: 'Created remote configuration'
                    })
                  );
              });
            }
          });
        }
      });
    }}
  >
    {$locale().settings.settingsSync.buttons.pull.title}
  </button>
  <SettingHint lineBreak>
    {$locale().settings.settingsSync.buttons.pull.hint}
  </SettingHint>
  <Spacer />
  <button
    onclick={() => {
      $settings.settingsSync = true;

      fetch(root(`/api/configuration`), {
        method: 'PUT',
        body: JSON.stringify($settings)
      }).then((response) => {
        if (response.ok)
          addNotification(
            options({
              heading: 'Settings Sync',
              description: 'Pushed local configuration to remote'
            })
          );
      });
    }}
  >
    {$locale().settings.settingsSync.buttons.push.title}
  </button>
  <SettingHint lineBreak>
    {$locale().settings.settingsSync.buttons.push.hint}
  </SettingHint>
{:else}
  <button
    onclick={() => {
      $settings.settingsSync = false;

      addNotification(
        options({
          heading: 'Settings sync disabled'
        })
      );
    }}
  >
    {$locale().settings.settingsSync.buttons.disable}
  </button>
  <button
    onclick={() => {
      fetch(root(`/api/configuration?id=${$identity.id}`), {
        method: 'DELETE'
      }).then((response) => {
        if (response.ok) {
          $settings.settingsSync = false;

          addNotification(
            options({
              heading: 'Remote configuration deleted and settings sync disabled'
            })
          );
        }
      });
    }}
  >
    {$locale().settings.settingsSync.buttons.delete}
  </button>

  <Spacer />

  <b>Last Push</b>: {$locale().dateFormatter($settingsSyncTimes.lastPush)}
  <br />
  <b>Last Pull</b>: {$locale().dateFormatter($settingsSyncTimes.lastPull)}
{/if}
