import { Component, OnInit } from '@angular/core'
import { ApisService } from '../services/apis.service'
import { AuthService } from '../services/auth.service'
import { AngularEditorConfig } from '@kolkov/angular-editor'
import { environment } from '../../environments/environment'
import { editorConfig } from '../../config/config'

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})
export class AdminComponent implements OnInit {

  private restApi = `${environment.API_URL}`
  public basePath = `${environment.BASE_PATH}`

  public authCheck: boolean = false
  public userName: string = ''
  public password: string = ''
  public activeEditor: string = ''
  public exhibitions: any = []

  public selectedExhibitions: any = []
  public selectedVideos: any = []
  public selectedGallery: any = []

  // ngModels
  public title: string = ''
  public type: string = ''
  public content: string = ''
  public tags: string = ''
  public mainImage: string = ''
  public videoType: string = ''
  public videoURL: string = ''

  editorConfig: AngularEditorConfig = editorConfig

  constructor(
    private authService: AuthService,
    private apisService: ApisService
  ) { }

  ngOnInit(): void {

    const body = { token: window.sessionStorage.getItem('authToken') }
    this.authService.authCheck(body).toPromise().then((response) => {
      this.authCheck = response.status == 200

      this.apisService.getPortfolio('exhibitions').toPromise().then((response) => {
        this.exhibitions = response.items
      },(error) => {
        console.error('getPortfolio ERROR', error)
      }).catch((e) => {
        console.error('getPortfolio CATCH', e)
      })
    },(error) => {
      console.error('Auth ERROR', error)
    }).catch((e) => {
      console.error('Auth CATCH', e)
    })
  }

  login(): void {
    const body = { usr: this.userName, pwd: this.password }
    this.authService.login(body).toPromise().then((response) => {
      this.authCheck = response.status == 200
      if(this.authCheck) {
        window.sessionStorage.setItem('authToken', response.authToken)
      }
    },(error) => {
      console.error('Auth ERROR', error)
    }).catch((e) => {
      console.error('Auth CATCH', e)
    })
  }

  showEditor(section): void {
    this.activeEditor = section
  }

  exhibitionAdd(id): void {
    this.selectedExhibitions.push(
      this.exhibitions.filter(item => item.id == id)[0]
    )
    this.exhibitions = this.exhibitions.filter(item => item.id != id)
  }

  exhibitionRemove(id): void {
    this.exhibitions.push(
      this.selectedExhibitions.filter(item => item.id == id)[0]
    )
    this.selectedExhibitions = this.selectedExhibitions.filter(item => item.id != id)
  }

  videoAdd(): void {
    this.selectedVideos.push({
      type: this.videoType,
      url: this.videoURL
    })
    this.videoURL = ''
  }

  videoRemove(url): void {
    this.selectedVideos = this.selectedVideos.filter(item => item.url != url)
  }

  onFileChanged(e) {
    const file = (<HTMLInputElement>e.target).files[0]
    const uploadData = new FormData()
    uploadData.append('token', window.sessionStorage.getItem('authToken'))
    uploadData.append('path', 'assets')
    uploadData.append('file', file, file.name)
    this.apisService.uploadImage(uploadData).toPromise().then((response) => {
      this.selectedGallery.push({
        title: response.title || '',
        url: response.imageUrl
      })
    },(error) => {
      console.error(error)
    }).catch((e) => {
      console.error(e)
    })
  }

  gallerySetMain(url): void {
    this.selectedGallery.forEach((e) => {
      if(e.url == url) {
        e.main = true
      } else {
        delete e.main
      }
    })
  }

  galleryRemove(url): void {
    const body = {
      token: window.sessionStorage.getItem('authToken'),
      url: url
    }
    this.apisService.removeImage(body).toPromise().then((response) => {
      this.selectedGallery = this.selectedGallery.filter(item => item.url != url)
    },(error) => {
      console.error(error)
    }).catch((e) => {
      console.error(e)
    })
  }

  saveWork(): void {

    let error = false
    let errorMessages = []
    const mainImage = this.selectedGallery.filter(item => item.main)

    if(!this.title){
      error = true
      errorMessages.push('No title')
    }
    if(!this.type){
      error = true
      errorMessages.push('No type selected')
    }
    if(this.selectedGallery.length == 0 || mainImage.length == 0){
      error = true
      errorMessages.push('No main image selected')
    }

    if(error) {
      console.log('ERORS:',errorMessages)
    } else {
      const body = {
        token: window.sessionStorage.getItem('authToken'),
        title: this.title,
        content: this.content,
        type: this.type,
        tags: this.tags,
        image: mainImage[0].url,
        exhibitions: this.selectedExhibitions.map(a => a.id).join(','),
        gallery: JSON.stringify(this.selectedGallery),
        videos: JSON.stringify(this.selectedVideos)
      }

      this.apisService.saveWork(body).toPromise().then((response) => {
        console.log(response)
        this.title = ''
        this.content = ''
        this.type = ''
        this.tags = ''
        this.selectedExhibitions = []
        this.selectedGallery = []
        this.selectedVideos = []
      },(error) => {
        console.error(error)
      }).catch((e) => {
        console.error(e)
      })
    }
  }
}