import { __decorate } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
let DashboardArrowAnimation = class DashboardArrowAnimation extends LitElement {
    constructor() {
        super(...arguments);
        // Lit의 reactive state가 재렌더링을 트리거하지 않도록 일반 프로퍼티로 변경
        this.currentFrame = 0;
        this.animationSpeed = 200;
        // 이미지들을 미리 로드하여 저장할 배열 (네트워크 요청을 한 번만 함)
        this.preloadedImages = [];
    }
    static { this.styles = css `
    :host {
      display: block;

      .animation canvas {
        width: 100%;
        aspect-ratio: 835 / 190;
      }
    }
  `; }
    firstUpdated() {
        // 0부터 10까지 이미지 미리 로드
        for (let i = 0; i < 11; i++) {
            const img = new Image();
            img.src = `../../assets/images/dashboard-arrow${i}.png`;
            this.preloadedImages.push(img);
        }
        // 애니메이션을 그릴 canvas 요소 가져오기
        const canvas = this.shadowRoot?.querySelector('canvas');
        if (!canvas) {
            console.error('Canvas element not found');
            return;
        }
        const ctx = canvas.getContext('2d');
        if (!ctx) {
            console.error('Canvas context not available');
            return;
        }
        // 첫 프레임을 그리기 (이미 로드 완료되었을 때)
        const drawInitialFrame = () => {
            const img = this.preloadedImages[this.currentFrame];
            if (img && img.complete) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            }
            else {
                // 이미지 로드가 완료되지 않았다면 잠시 후 다시 시도
                setTimeout(drawInitialFrame, 100);
            }
        };
        drawInitialFrame();
        // 애니메이션 루프 시작 (주기마다 canvas에 현재 프레임 이미지를 그림)
        this.animationInterval = window.setInterval(() => {
            this.currentFrame = (this.currentFrame + 1) % this.preloadedImages.length;
            const img = this.preloadedImages[this.currentFrame];
            if (img && img.complete) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            }
        }, this.animationSpeed);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        if (this.animationInterval) {
            clearInterval(this.animationInterval);
            this.animationInterval = undefined;
        }
    }
    render() {
        // 기존의 <img> 요소 대신 <canvas>를 사용하여 preloaded 이미지로 애니메이션 처리
        return html `
      <div class="animation">
        <canvas></canvas>
      </div>
    `;
    }
};
DashboardArrowAnimation = __decorate([
    customElement('dashboard-arrow-animation')
], DashboardArrowAnimation);
export { DashboardArrowAnimation };
//# sourceMappingURL=dashboard-arrow-animation.js.map