// Angular Core
import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
import { environment } from 'src/environments/environment';
import {
  trigger,
  transition,
  style,
  animate
} from '@angular/animations';
import { AccountInfoService } from 'src/app/services/accountInfo/account-info.service';
// Third Party
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
interface StepContent {
    titleImg: string;
    title: string;
    description: string;
    proTip: string;
}

@Component({
  standalone: false,
  selector: 'app-onboarding-tour-steps-modal',
  templateUrl: './onboarding-tour-steps-modal.component.html',
  styleUrls: ['./onboarding-tour-steps-modal.component.scss'],
  animations: [
    trigger('fadeSlide', [
      transition('* => *', [
        style({ opacity: 0, transform: 'translateX(20px)' }),
        animate('300ms ease-out',
          style({ opacity: 1, transform: 'translateX(0)' })
        )
      ])
    ])
  ]
})
export class OnboardingTourStepsModalComponent implements OnInit {

  @Input() closeOnboardStepsModal!: () => void;
  currentStep: number = 1;
  totalSteps: number = 6;
  stepsRange: number[] = [];
  imgUrl: string = environment.imageUrl;
  steps: Record<string, StepContent> = {
    step2: {
       titleImg: "search-icon.png",
       title: "Search & Discover",
       description: "Search by NDC, product name, or by category. Search results are in order by unit price lowest to highest so you see the best deal first.",
       proTip: "Use the Advanced Filter to narrow down a large number of search results."
    },
    step3: {
       titleImg: "dollar-sign.png",
       title: "Compare Prices & Savings",
       description: "Real-time pricing across all suppliers. Check the Trending and Today's Deals pages to find popular products.",
       proTip: "Your Dashboard is updated daily with the most popular products selling on the platform by type."
    },
    step4: {
       titleImg: "shopping-cart.png",
       title: "Build Your Order",
       description: "Create orders from multiple suppliers simultaneously in your cart, choose shipping and checkout.",
       proTip: "Use Recommended Products in cart to help you build your order. It's a combination of what you purchase most from the supplier and their most popular items."
    },
    step5: {
       titleImg: "creditcard.png",
       title: "Checkout & Payment",
       description: "Checkout with one or more suppliers at once. Payments via credit card or ACH are paid directly to the suppliers either prepay or net terms.",
       proTip: "You can add or update your payment methods on file by going to Tools menu then click Payment Portal."
    },
    step6: {
       titleImg: "truck-white.png",
       title: "Shipping & Fulfillment",
       description: "Choose from ground, 2-day or next day shipping. Free shipping is often available when you meet the supplier minimum.",
       proTip: "Review the Supplier Ordering and Shipping Info page under the Supplier Info tab for more details."
    }
   };

  constructor(public activeModal: NgbActiveModal, private accountInfoService: AccountInfoService) { }

  ngOnInit(): void {
    this.stepsRange = Array.from({ length: this.totalSteps }, (_, i) => i);
  }

  next() {
    if (this.currentStep < this.totalSteps) {
        this.currentStep++;
        if (this.currentStep == this.totalSteps) {
            this.accountInfoService.setOnboardTourStatus({ field: 'tour_status', value: 'completed' })
              .subscribe({
                  next: (res: any) => {
                  },
                  error: (err) => {
                      this.accountInfoService.errorCallBack(err);
                  },
                  complete: () => { },
            });
        }
    }
  }

  back() {
    if (this.currentStep > 1) {
        this.currentStep--;
    }
  }
}