<!--
  @component Renders a system dialog to inform the user about the app update download progress.
-->
<script lang="ts">
  import Modal from '~/app/ui/components/hocs/modal/Modal.svelte';
  import Logo from '~/app/ui/components/partials/logo/Logo.svelte';
  import type {AutoAppUpdateDownloadDialogProps} from '~/app/ui/components/partials/system-dialog/internal/auto-app-update-download-dialog/props';
  import {i18n} from '~/app/ui/i18n';
  import type {SvelteNullableBinding} from '~/app/ui/utils/svelte';
  import {TIMER} from '~/common/utils/timer';

  const {latestVersion, onclose, oncompletion, progress, target}: AutoAppUpdateDownloadDialogProps =
    $props();

  let modalComponent = $state<SvelteNullableBinding<Modal>>(null);

  function handleCompleteAnimation(): void {
    TIMER.timeout(() => {
      oncompletion();
      modalComponent?.close();
    }, 1000);
  }
</script>

<Modal
  bind:this={modalComponent}
  {onclose}
  options={{
    allowClosingWithEsc: false,
    allowSubmittingWithEnter: false,
    overlay: 'opaque',
    suspendHotkeysWhenVisible: true,
  }}
  {target}
  wrapper={{
    type: 'card',
    layout: 'compact',
  }}
>
  <div class="content">
    {#if import.meta.env.BUILD_VARIANT !== 'custom'}
      <div class="indicator">
        <Logo animated={true} oncompletion={handleCompleteAnimation} {progress} />
      </div>
    {/if}
    <div class="status">
      <p>
        {#if progress < 0.99}
          {$i18n.t(
            'dialog--auto-app-update-download.prose--downloading',
            'Downloading {shortAppName} {version} for desktop…',
            {
              version: latestVersion,
              shortAppName: import.meta.env.SHORT_APP_NAME,
            },
          )}
        {:else}
          {$i18n.t('dialog--auto-app-update-download.prose--restarting', 'Preparing installation…')}
        {/if}
      </p>
    </div>
  </div>
</Modal>

<style lang="scss">
  @use 'component' as *;

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: rem(10px);

    padding: rem(16px);
    width: rem(380px);
    height: rem(380px);

    .indicator {
      width: rem(96px);
      height: rem(121px);
    }

    .status {
      text-align: center;

      p:first-child {
        margin-top: 0;
      }

      p:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>
