import {Component, OnDestroy, OnInit} from '@angular/core';
import {ProductCollectionService} from './entities/product-collection/product-collection.service';
import {CustomerVariableService} from './entities/product-collection/customer-variable.service';
import {ProductTemplateService} from './entities/product-collection/product-template.service';
import {DocumentReaderService} from './entities/product-collection/document-reader.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import {Subscription} from 'rxjs';
import {ModalWarningService} from './services/modal-warning.service';
import {ModalWarningComponent} from './shared/modal-warning/modal-warning.component';
import {environment} from "../environments/environment";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  subscription: Subscription = new Subscription();
  title = 'preview-lib-app';
  steps = [{
    "label": "Etape n°1",
    "stepType": "STANDARD",
    "fields": [{
      "className": "auto-fill-width",
      "fieldGroup": [{
        "key": "5eec87a1c2bc325f648fcf71",
        "type": "input",
        "templateOptions": {
          "type": "date",
          "label": "<p>date de naissance</p>",
          "required": false,
          "options": [],
          "change": "(field) => { this.model['insured_identity_birthday'] = this.model[field.key];}"
        }
      }, {
        "key": "5eec87b5c2bc325f648fcf72",
        "type": "input",
        "templateOptions": {
          "label": "<p>Question-1</p>",
          "required": false,
          "options": [],
          "change": "(field) => { this.model['insured_identity_lastname'] = this.model[field.key];}"
        },
        "hideExpression": "! ((model['insured_identity_age'] > '18'))"
      }]
    }]
  },
    {
      "label": "Etape récap",
      "type": "stepSummary",
      "fields": [{
        "fieldGroup": [{
          "key": "summary",
          "type": "stepSummary",
          "templateOptions": {
            "options": []
          }
        }]
      }]
    }
  ];
  model = {
    "insured_identity_quality": "emprunteur",
    "insured_identity_lastname": "TOTO",
    "insured_identity_birthday": "07/04/1990",
    "insured_identity_gender": "M",
    "insured_identity_age": 19,
    "5eec87a1c2bc325f648fcf71": [],
    "5eec87b5c2bc325f648fcf72": []
  };

  selectedItem = '';
  services = {};

  constructor(
    private productCollectionService: ProductCollectionService,
    private customerVariableService: CustomerVariableService,
    private productTemplateService: ProductTemplateService,
    private documentReaderService: DocumentReaderService,
    private modalService: NgbModal,
    private modalWarningService: ModalWarningService
  ) {

  }


  ngOnInit() {
    this.services['customerVariableService'] = this.customerVariableService;
    this.services['productTemplateService'] = this.productTemplateService;
    this.services['documentReaderService'] = this.documentReaderService;

    this.subscription.add(
      this.modalWarningService.getSubject().subscribe(config => {
        this.onModalRequest();
      })
    );

    this.setColor();
  }

  setColor(): void {
    document.documentElement.style.setProperty('--primary-color', environment.themeColors.primary);
    document.documentElement.style.setProperty('--info-color', environment.themeColors.info);
    document.documentElement.style.setProperty('--menu-color', environment.themeColors.menu);
    document.documentElement.style.setProperty('--pink-color', environment.themeColors.secondary);
    document.documentElement.style.setProperty('--sidebar-heading-icon', environment.themeColors.sidebarHeadingIcon);
    document.documentElement.style.setProperty('--button-background-color', environment.themeColors.buttonBackgroundColor);
    document.documentElement.style.setProperty('--button-hover-background-color', environment.themeColors.buttonHoverBackgroundColor);
    document.documentElement.style.setProperty('--button-text-color', environment.themeColors.buttonTextColor);
    document.documentElement.style.setProperty('--tab-background-color', environment.themeColors.tabBackgroundColor);
    document.documentElement.style.setProperty('--tab-hover-background-color', environment.themeColors.tabHoverBackgroundColor);
    document.documentElement.style.setProperty('--tab-text-color', environment.themeColors.tabTextColor);
    document.documentElement.style.setProperty('--checkbox-background-color', environment.themeColors.checkBoxBackgroundColor);
    document.documentElement.style.setProperty('--main-police', environment.themeColors.mainPolice);
    document.documentElement.style.setProperty('--step-summary-cost-money-saved', environment.themeColors.stepSummaryCostMoneySaved);
    document.documentElement.style.setProperty('--step-summary-background-block-money-saved', environment.themeColors.stepSummaryBackgroundBlockMoneySaved);
  }


  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  onSlectedCountry(slectedItem) {
    this.selectedItem = slectedItem;
  }

  updateData(data) {
    console.log(data);

  }

  saveDataStep(event) {
    console.log(event);
  }

  private onModalRequest(): void {
    this.modalWarningService.modalRef = this.modalService.open(ModalWarningComponent, { centered: true });
  }
}