import { html } from '@design.estate/dees-element';

import { DeesUpdater } from '../dees-updater/dees-updater.js';

const waitForDemoStep = async (timeoutArg: number): Promise<void> => {
  await new Promise<void>((resolve) => {
    window.setTimeout(() => resolve(), timeoutArg);
  });
};

export const demoFunc = () => {
  let updaterRunning = false;

  return html`
    <div style="display: grid; gap: 16px; place-items: center; padding: 32px; text-align: center;">
      <p style="margin: 0; max-width: 540px; line-height: 1.6; color: var(--dees-color-text-secondary);">
        Launches the updater as a stepper flow. The first step streams terminal-style
        progress updates and then moves automatically to the ready step.
      </p>
      <dees-button
        @click=${async () => {
          if (updaterRunning) {
            return;
          }

          updaterRunning = true;

          try {
            const updater = await DeesUpdater.createAndShow({
              currentVersion: '3.79.0',
              updatedVersion: '3.80.0',
              moreInfoUrl: 'https://code.foss.global/design.estate/dees-catalog',
              changelogUrl: 'https://code.foss.global/design.estate/dees-catalog/-/blob/main/changelog.md',
              successAction: 'close',
              successDelayMs: 10000,
            });

            const progressFrames = [
              { line: 'Checking release manifest', percentage: 12, delay: 550 },
              { line: 'Downloading signed bundle', percentage: 33, delay: 700 },
              { line: 'Verifying checksum', percentage: 51, delay: 650 },
              { line: 'Applying update files', percentage: 74, delay: 800 },
              { line: 'Cleaning up previous release', percentage: 91, delay: 600 },
            ];

            updater.updateProgress({
              statusText: 'Checking release manifest...',
              terminalLines: ['Checking release manifest'],
              percentage: 12,
              indeterminate: true,
            });

            for (const [index, progressFrame] of progressFrames.entries()) {
              if (index > 0) {
                updater.appendProgressLine(progressFrame.line);
                updater.updateProgress({
                  percentage: progressFrame.percentage,
                  statusText: `${progressFrame.line}...`,
                });
              }

              await waitForDemoStep(progressFrame.delay);
            }

            await updater.markUpdateReady();
            await waitForDemoStep(10500);
          } finally {
            updaterRunning = false;
          }
        }}
      >Show updater flow</dees-button>
    </div>
  `;
};