<template>
  <div>
    <v-card width="350" v-if="data !== undefined">
      <v-list-item three-line>
        <v-list-item-content>
          <v-card-title class="d-inline-block text-truncate pt-0 px-0">{{
            city.name
          }}</v-card-title>
          <v-card-subtitle class="pb-0 px-0">{{
            city.country
          }}</v-card-subtitle>
          <v-list-item-title class="text-h3 font-weight-thin"
            >{{ Math.round(data.current.temp) }} °C</v-list-item-title
          >
          <v-list-item-subtitle>{{
            data.current.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.current.weather[0].icon +
              '@2x.png'
            "
            height="75"
            width="75"
          ></v-img>
        </v-list-item-avatar>
      </v-list-item>
      <v-divider></v-divider>
      <v-row justify="space-around">
        <v-col class="text-center" v-for="i in 5" :key="i">
          <div>{{ getMoment(data.hourly[i * 3].dt, "HH:mm") }}</div>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-img
                :src="
                  'http://openweathermap.org/img/wn/' +
                  data.hourly[i * 3].weather[0].icon +
                  '.png'
                "
                height="40"
                width="40"
                class="mx-auto"
                v-on="on"
              ></v-img>
            </template>
            <span>{{ data.hourly[i * 3].weather[0].description }}</span>
          </v-tooltip>
          <div>{{ Math.round(data.hourly[i * 3].temp) }} °C</div>
        </v-col>
      </v-row>
      <v-divider></v-divider>
      <v-card-actions>
        <v-row>
          <v-col cols="6">
            <v-btn block class="primary" @click="details = true"
              >Szczegóły</v-btn
            >
          </v-col>
          <v-col cols="6">
            <v-btn block class="error" @click="deleteCity()">Usuń</v-btn>
          </v-col>
        </v-row>
      </v-card-actions>
    </v-card>
    <v-skeleton-loader type="card" v-else></v-skeleton-loader>
    <Details
      v-model="details"
      :city="city"
      :wdata="data"
      v-if="city && data"
    ></Details>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import Details from "@/components/Details.vue";
import axios from "axios";
const moment = require("moment");
const Config = require("@/config.json");

@Component({
  components: {
    Details,
  },
})
export default class City extends Vue {
  @Prop({ required: true }) private readonly city!: any;

  private created() {
    this.getData();
    //setInterval(this.getData, 1000 * 60);
  }

  private getData() {
    axios
      .get("https://api.openweathermap.org/data/2.5/onecall", {
        params: {
          lat: this.city.coord.lat,
          lon: this.city.coord.lon,
          units: "metric",
          lang: "pl",
          appid: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_OWM_API_KEY : Config.OWM_API_KEY,
        },
      })
      .then((res) => {
        this.$data.data = res.data;
      })
      .catch((e) => {
        this.$store.dispatch(
          "errorMessage",
          "Błąd " + e.status.code + " przy pobieraniu danych!"
        );
      });
  }

  getMoment(dt: string, format: string) {
    return moment.unix(dt).format("HH:mm");
  }

  private deleteCity() {
    this.$emit("delete");
  }

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