const furigana = (kanji, furigana) =>
  `<ruby>${kanji}<rt>${furigana}</rt></ruby>`;

const updateClock = () => {
  const days = [
    furigana("日曜日", "にちようび"),
    furigana("月曜日", "げつようび"),
    furigana("火曜日", "かようび"),
    furigana("水曜日", "すいようび"),
    furigana("木曜日", "もくようび"),
    furigana("金曜日", "きんようび"),
    furigana("土曜日", "どようび"),
  ];
  const months = [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ];
  const today = new Date();
  const dateString =
    days[today.getDay()] +
    "、" +
    months[today.getMonth()] +
    " " +
    today.getDate() +
    "、" +
    today.getFullYear() +
    "、" +
    ("0" + today.getHours()).slice(-2) +
    ":" +
    ("0" + today.getMinutes()).slice(-2) +
    ":" +
    ("0" + today.getSeconds()).slice(-2);

  document.getElementById("time").innerHTML = dateString;

  setTimeout(updateClock, 500);
};

const weather = () => {
  const key = "40d2bf562ba19169b08d75a16f3756c1";
  const latitude = "45.53929";
  const longitude = "-122.38731";

  fetch(
    `https://api.openweathermap.org/data/2.5/onecall?units=metric&lat=${latitude}&lon=${longitude}&exclude=minutely,hourly&appid=${key}`
  )
    .then((resp) => resp.json())
    .then((data) => {
      displayWeather(data);
    })
    .catch((e) => {
      console.log(`ERROR! ${e}`);
    });
};

const displayWeather = (data) => {
  const conditions = {
    200: "thunderstorms, light rain",
    201: "thunderstorms, rain",
    202: "thunderstorms, heavy rain",
    210: "light thunderstorms",
    211: "thunderstorms",
    212: "heavy thunderstorms",
    221: "ragged thunderstorms",
    230: "thunderstorms, light drizzle",
    231: "thunderstorms, drizzle",
    232: "thunderstorms, heavy drizzle",

    300: "light drizzle",
    301: "drizzle",
    302: "heavy drizzle",
    310: "light drizzle rain",
    311: "drizzle rain",
    312: "heavy drizzle rain",
    313: "rain showers and drizzle",
    314: "heavy rain showers and drizzle",
    321: "drizzle showers",

    500: "light rain",
    501: "rain",
    502: "heavy rain",
    503: "very heavy rain",
    504: "extreme rain",
    511: "freezing rain",
    520: "light showers",
    521: "showers",
    522: "heavy showers",
    531: "ragged showers",

    600: "light snow",
    601: "snow",
    602: "heavy snow",
    611: "sleet",
    612: "light sleet",
    613: "sleet showers",
    615: "light rain and snow",
    616: "rain and snow, glhf",
    620: "light snow showers",
    621: "snow showers",
    622: "heavy snow showers",

    701: "mist",
    711: "smoke",
    721: "haze",
    731: "dust",
    741: "fog",
    751: "darude sandstorm",
    761: "dust",
    762: "stark mountain ash",
    771: "squalls",
    781: "tornado",

    800: furigana("快晴", "かいせい"), // clear
    801: furigana("薄雲", "うすぐも"), // light clouds
    802: "scattered clouds",
    803: furigana("破れた雲", "やぶれたくも"), // broken clouds
    804: furigana("雨曇り", "あまぐもり"), // overcast
  };
  const currentWeather = `${data.current.temp.toFixed(0)}${furigana(
    "度",
    "ど"
  )}、${conditions[data.current.weather[0].id]}（${furigana(
    "体感温度",
    "たいかんおんど"
  )}${data.current.feels_like.toFixed(0)}${furigana("度", "ど")}）`;
  const tomorrowsWeather = `${data.daily[1].temp.day.toFixed(0)}${furigana(
    "度",
    "ど"
  )}、${conditions[data.daily[1].weather[0].id]}（${furigana(
    "体感温度",
    "たいかんおんど"
  )}${data.daily[1].feels_like.day.toFixed(0)}${furigana("度", "ど")}）`;

  document.getElementById("current-weather").innerHTML = currentWeather;
  document.getElementById("tomorrows-weather").innerHTML = tomorrowsWeather;
};

const chooseWaifu = () => {
  fetch("https://api.waifu.im/search").then((response) => {
    response.json().then((json) => {
      document.getElementById("waifu").src = json["images"][0]["url"];
      document.getElementById("waifu-link").href =
        json["images"][0]["source"] ||
        json["images"][0]["artist"]["twitter"] ||
        json["images"][0]["artist"]["pixiv"];
    });
  });
};

window.onload = () => {
  // chooseWaifu();
  weather();
};

updateClock();