import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {Router} from '@angular/router';
import {DatePipe} from '@angular/common';

import { WeatherService } from 'src/app/services/weather.service';
import { Subscription } from 'rxjs';
import {first} from 'rxjs/operators';

@Component({
  selector: 'app-weather-card',
  templateUrl: './weather-card.component.html',
  styleUrls: ['./weather-card.component.scss']
})

export class WeatherCardComponent implements OnInit {
  listData: any;
  citesWeather: Object;
  darkMode: boolean;
  sub1: Subscription;
  state: string;
  temp: number;
  maxTemp: number;
  minTemp: number;
  errorMessage: string;
  cityName: string;
  cityAdded = false;
  icon: string;
  icon_exists: boolean;
  pipe = new DatePipe('es-ES')
  newDate = Date.now();
  currentDate = this.pipe.transform(this.newDate, 'fullDate')

  constructor(public weather: WeatherService, public router: Router) {

  }

  ngOnInit() {
    this.weather.getWeather("San%20Salvador")
      .pipe(first())
      .subscribe((payload) => {
        this.cityName = payload.name
        this.state = payload.weather[0].description;
        this.temp = Math.ceil(payload.main.temp);
        this.icon_exists = true;
        this.icon = payload.weather[0].icon;
      }, (err) => {
        this.errorMessage = err.error.message;
      });

  }

}
