<template>
  <div>
    <v-card height="200" width="350" v-if="data !== undefined">
      <v-list-item three-line>
      <v-list-item-content>
        <div class="text-overline">
          {{ data.name }}, {{ data.sys.country }}
        </div>
        <v-list-item-title class="text-h3 font-weight-thin">{{ Math.round(data.main.temp) }} °C</v-list-item-title>
        <v-list-item-subtitle>{{ data.weather[0].description }}</v-list-item-subtitle>
      </v-list-item-content>

      <v-list-item-avatar
        tile
        size="80"
      >
      <v-img :src="'http://openweathermap.org/img/wn/' + data.weather[0].icon + '@2x.png'" height="75" width="75"></v-img>
      </v-list-item-avatar>
    </v-list-item>
    </v-card>
    <v-skeleton-loader type="card" v-else></v-skeleton-loader>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import axios from "axios";

@Component
export default class City extends Vue {
  @Prop({ required: true }) private readonly id!: number;

  private created() {
    this.getCurrentData();
    this.getHourForecast();
  }

  private getCurrentData() {
    axios
      .get("https://api.openweathermap.org/data/2.5/weather", {
        params: {
          id: this.id,
          units: "metric",
          lang: "pl",
          appid: process.env.VUE_APP_API_KEY,
        },
      })
      .then((res) => {
        this.$data.data = res.data;
        console.log(res.data);
      })
      .catch((e) => {
        console.error(e);
      });
  }

  private getHourForecast() {
    axios
      .get("https://api.openweathermap.org/data/2.5/forecast", {
        params: {
          id: this.id,
          units: "metric",
          lang: "pl",
          appid: process.env.VUE_APP_API_KEY, 
        },
      })
      .then((res) => {
        this.$data.forecast = res.data;
        console.log('forecast', res.data);
      })
      .catch((e) => {
        console.error(e);
      });
  }

  private data() {
    return {
      data: undefined,
      forecast: undefined,
    };
  }
}
</script>