import {Component, HostBinding} from '@angular/core';
import {CmsComponentData} from "@spartacus/storefront";
import {CmsContentfulContentSlotComponent} from "../../contentful.models";
import {Router} from "@angular/router";
import {Observable} from "rxjs";
import {tap} from "rxjs/operators";

@Component({
  selector: 'cx-contentful-content-slot',
  templateUrl: './contentful-content-slot.component.html',
  styleUrls: []
})
export class ContentfulContentSlotComponent {

  @HostBinding('class') styleClasses: string | undefined;
  @HostBinding('style') innerStyle: string | undefined;

  data$: Observable<CmsContentfulContentSlotComponent> = this.component.data$.pipe(
    tap((data) => (this.styleClasses = 'slot-' + data?.style?.toLowerCase())),
    tap((data) => {
      if (data?.backgroundColor) {
         this.innerStyle='background-color: ' + data.backgroundColor;
      }
    })
  );

  constructor(
    public component: CmsComponentData<CmsContentfulContentSlotComponent>,
    protected router: Router
  ) {}
}