<template>
  <div class="feed">
    <header>
      <div class="top">
        <a :href="feed.homeUrl" target="_blank" v-if="feed.title?.length">
          <h1 v-html="feed.title" v-if="feed.html.title" />
          <h1 v-text="feed.title" v-else />
        </a>
        <a :href="feed.feedUrl" class="feed-url" v-if="feed.feedUrl?.length">
          (Feed URL)
        </a>
        <a :href="feed.image.targetUrl" class="image" target="_blank" v-if="feed.image?.imageUrl">
          <img :src="feed.image.imageUrl" :alt="feed.image.title">
        </a>
      </div>

      <div class="description" v-if="feed.description?.length">
        <span v-if="feed.html.description" v-html="feed.description" />
        <span v-else v-text="feed.description" />
      </div>
    </header>

    <main>
      <div class="item" v-for="item, i in (feed.items || [])" :key="i">
        <div class="header" :class="{expanded: expandedItems[i]}"
            @click="expandedItems[i] = !expandedItems[i]">
          <h2 v-if="item.title?.length">
            <a :href="item.url" target="_blank" v-html="item.title" v-if="item.html.title" />
            <a :href="item.url" target="_blank" v-text="item.title" v-else />
          </h2>

          <div class="age" v-if="item.age" :title="new Date(item.pubDate).toLocaleString()">
            Published {{ item.age }} ago
          </div>

          <div class="categories" v-if="item.categories?.length">
            <div class="category" v-for="category, i in item.categories" :key="i" v-text="category" />
          </div>
        </div>

        <div class="content" v-if="expandedItems[i] && (item?.image?.url || item.description?.length)">
          <div class="image-container" v-if="item?.image?.url">
            <img :src="item.image.url">
          </div>

          <div class="description" v-if="item.description?.length" v-html="item.description" />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import browser from 'webextension-polyfill';

export default {
  name: 'App',
  data() {
    return {
      feed: {},
      expandedItems: {},
    }
  },

  async mounted() {
    this.feed = (await browser.storage.local.get('feedData'))?.feedData || {}
    if (this.feed.iconUrl) {
      const link = document.querySelector("link[rel*='icon']") || document.createElement('link')
      link.type = 'image/x-icon'
      link.rel = 'shortcut icon'
      link.href = this.feed.iconUrl
      document.getElementsByTagName('head')[0].appendChild(link)
    }
  },
}
</script>

<style lang="scss" scoped>
.feed {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
  padding: 0.5em;
  box-shadow: 1px 1px 1px 1px #b7b7b7;

  .top {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
  }

  h1 {
    margin: 0.5em 0;
  }

  h2 {
    font-size: 1.5em;
    font-weight: normal;
  }

  .feed-url {
    margin-left: 1em;
  }

  .image {
    position: absolute;
    right: 0;

    img {
      max-height: 4em;
    }
  }
}

main {
  background: #f4f4f4;
  margin-top: 0.25em;
  padding-top: 2em;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  overflow: auto;

  .image-container {
    width: 100%;
    text-align: center;

    img {
      max-width: 640px;
      max-height: 400px;
      width: 100%;
    }
  }

  .item {
    width: 100%;
    max-width: 70em;
    background: white;
    margin: 0 1em 1.5em 1em;
    border-radius: 1em;
    box-shadow: 0px 0px 5px 3px #b7b7b7;

    .header {
      cursor: pointer;
      padding: 0.5em;
      border-radius: 1em;

      &.expanded {
        border-radius: 1em 1em 0 0;
      }

      &:hover {
        background: #cff7cf;
      }
    }

    .age {
      font-size: 0.9em;
      margin-top: -0.5em;
      cursor: pointer;

      &:hover {
        color: #186536;
      }
    }

    .categories {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0.5em;

      .category {
        margin: 0 0.5em 0.5em 0;
        padding: 0.5em;
        border: 1px solid #e0e0e0;
        border-radius: 1em;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      padding: 1em;
      font-size: 1.25em;

      .description {
        padding: 1em;
        text-align: justify;
      }
    }
  }
}

a {
  color: #1b499f;
  text-decoration: none;

  &:hover {
    color: #1886e5;
  }
}

.hidden {
  display: none;
}
</style>
