import { Component, OnInit, ViewChild } from '@angular/core';
import { LocalStorage } from "../../core/services/local_storage.service"
import { HyperService } from '../../core/services/http.service';
import { Router } from "@angular/router";
import * as moment from 'moment';
import { ImageClass } from '../custom-threesixty';
import {Location} from '@angular/common';
 
import $ from 'jquery'
declare var $: $
import { CONFIG } from '../../../app/config';
@Component({
  selector: 'app-lauch-threesixty',
  templateUrl: './lauch-threesixty.component.html',
  styleUrls: ['./lauch-threesixty.component.scss']
})
export class LauchThreesixtyComponent  {
    itemList: any = []
    variantColors: any = []
    loader:boolean=false;
    model_name:string;
    constructor(private server: HyperService, private router: Router, private icls: ImageClass,private loc:Location) {
        this.icls.loaded();
    }

    ngOnInit() {
       this.model_name =  LocalStorage.getValue('model_name')
       this.get360Images()
    }
    goBack(){
        this.loc.back();
    }
    get360Images() {
        this.loader=true;
        this.server.get("explore/newimages360/"+LocalStorage.getValue('set_model_id'))
            .then((data) => {
                // console.log(data.result.data)
                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
                    this.variantColors = data.result.data;
                    this.loader=false;
                   this.colorVariant(this.variantColors[0])
                    // let height = $(".threesixty").height();
                    // let newWidth = (height / 100) * 155;
                    // console.log(newWidth)
                    // $('.threesixty').css({
                    //     width:newWidth+'%',height:height+'%'
                    // });
                    // let wid = newWidth/ 100;
                    // let hei = height/ 100.0;
                    // console.log(wid,hei)
                    

                    // imageurl = data.result.data.zip.substr(0, data.result.data.zip.lastIndexOf('/'))
                   
                } else if (data.result.status == 401 && data.result.response == 'failed') {
                    this.router.navigateByUrl('');
                } else {
                    this.loader=false;
                    alert(data.result.message)
                    CONFIG.image360Sources = [];
                    this.router.navigateByUrl('threesixty-dashboard')
                }
            });
    }
    colorVariant(clrValue){
        let imageurl: string;
        let itemList:any=[]
        CONFIG.image360Sources = [];
        // console.log(clrValue)
        itemList = clrValue.imagelist
        // console.log(itemList.length)
        for(let i=0;i<itemList.length;i++){
            imageurl = itemList[i]
            CONFIG.image360Sources.push(imageurl)
        }
        // console.log(CONFIG.image360Sources)
    }
  }
