import { Component, Input } from '@angular/core';
import BaseSection from '../BaseSection';
import { CommonModule } from '@angular/common';
import { SimpoElementsModule } from '../../elements/index';
import { SimpoComponentModule } from '../../components/index';
import { BackgroundDirective } from '../../directive/background-directive';
import { SimpoHoverBorderDirective } from "../../directive/hoverborder.directive";
import { HoverDirective } from '../../directive/hover-element-directive';
import { TextBackgroundDirectiveDirective } from '../../directive/text-background-directive.directive';
import * as i0 from "@angular/core";
import * as i1 from "../../services/events.service";
import * as i2 from "@angular/common";
import * as i3 from "../../components/hover-elements/hover-elements.component";
import * as i4 from "../../components/delete-hover-element/delete-hover-element.component";
export class MovingTextComponent extends BaseSection {
    constructor(_eventService) {
        super();
        this._eventService = _eventService;
        this.currentIndex = 0;
        this.previousIndex = -1;
        this.isTransitioning = false;
        this.animationDirection = 'left';
        this.animationDuration = 800; // Match CSS animation duration
        this.displayDuration = 3000; // How long each item shows
    }
    ngOnInit() {
        if (this.data?.styles?.headline?.headlineAnimationType === 'SoftTransition' &&
            this.data?.content?.listItem?.data?.length) {
            setTimeout(() => {
                this.startAnimationCycle();
            }, 100);
        }
    }
    ngOnDestroy() {
        if (this.interval) {
            clearInterval(this.interval);
        }
    }
    startAnimationCycle() {
        if (!this.data?.content?.listItem?.data?.length) {
            return;
        }
        // Clear any existing interval
        if (this.interval) {
            clearInterval(this.interval);
        }
        this.currentIndex = 0;
        this.previousIndex = -1;
        this.animationDirection = 'right'; // Start with right animation
        this.interval = setInterval(() => {
            this.transitionToNext();
        }, this.displayDuration);
    }
    transitionToNext() {
        if (this.isTransitioning)
            return;
        this.isTransitioning = true;
        this.previousIndex = this.currentIndex;
        // Calculate next index
        this.currentIndex = (this.currentIndex + 1) % this.data.content.listItem.data.length;
        // Alternate direction for variety
        this.animationDirection = this.animationDirection === 'left' ? 'right' : 'left';
        // Reset transition flag after animation completes
        setTimeout(() => {
            this.isTransitioning = false;
            this.previousIndex = -1;
        }, this.animationDuration);
    }
    // Method to check if item should be visible
    isItemVisible(index) {
        return index === this.currentIndex || index === this.previousIndex;
    }
    // Method to get animation class for item
    getItemClass(index) {
        if (index === this.currentIndex) {
            return `active fade-in-${this.animationDirection}`;
        }
        else if (index === this.previousIndex && this.isTransitioning) {
            return `fade-out-${this.animationDirection === 'left' ? 'right' : 'left'}`;
        }
        return '';
    }
    getTextColor(bgColor) {
        if (bgColor) {
            const threshold = 130;
            const r = parseInt(bgColor.slice(1, 3), 16);
            const g = parseInt(bgColor.slice(3, 5), 16);
            const b = parseInt(bgColor.slice(5, 7), 16);
            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
            return brightness > threshold ? '#000000' : '#ffffff';
        }
        return "#ffffff";
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MovingTextComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MovingTextComponent, isStandalone: true, selector: "simpo-moving-text", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index" }, usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\n        [style.background]=\"data?.styles?.headline?.color\">\n        \n        <!-- Infinite Scroll Animation -->\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\n            *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'InfiniteScroll'\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\n                <div class=\"sliding-text text-nowrap\" [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </div>\n        \n        <!-- Soft Transition Animation -->\n        <div *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\n                <div class=\"list-item text-nowrap\" \n                     [ngClass]=\"getItemClass(i)\"\n                     [class.visible]=\"isItemVisible(i)\"\n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </div>\n\n        <!-- No Effect -->\n        <ng-container *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'NoEffect'\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\n                <div class=\"d-flex align-items-center justify-content-center w-100 text-nowrap\" \n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Existing hover elements -->\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:20px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i3.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i4.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MovingTextComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-moving-text', standalone: true, imports: [
                        CommonModule,
                        SimpoElementsModule,
                        SimpoComponentModule,
                        BackgroundDirective,
                        SimpoHoverBorderDirective,
                        HoverDirective,
                        TextBackgroundDirectiveDirective,
                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\n        [style.background]=\"data?.styles?.headline?.color\">\n        \n        <!-- Infinite Scroll Animation -->\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\n            *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'InfiniteScroll'\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\n                <div class=\"sliding-text text-nowrap\" [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </div>\n        \n        <!-- Soft Transition Animation -->\n        <div *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\n                <div class=\"list-item text-nowrap\" \n                     [ngClass]=\"getItemClass(i)\"\n                     [class.visible]=\"isItemVisible(i)\"\n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </div>\n\n        <!-- No Effect -->\n        <ng-container *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'NoEffect'\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\n                <div class=\"d-flex align-items-center justify-content-center w-100 text-nowrap\" \n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Existing hover elements -->\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:20px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], customClass: [{
                type: Input
            }], index: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 