<template>
  <div class="container">
    <h1>Wsparcie i obsługa organizacji 360<sup>o</sup></h1>
    <main>
      <div class="bg-image-container">
        <img
            v-for="(item, i) in items"
            :key="i"
            :src="item.image"
            v-show="index === i"
            class="bg-image"
            alt=""
        />
<!--        <img v-if="items.length" :src="currentItem.image" class="bg-image" alt="" />-->
      </div>

        <div style="width: 100%; height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <div id="circle">
            <div id="content">
              <div :style="{ background: items[0] ? items[0].color : '#E6E6E6' }"></div>
              <div :style="{ background: items[1] ? items[1].color : '#E6E6E6' }"></div>
              <div :style="{ background: items[3] ? items[3].color : '#E6E6E6' }"></div>
              <div :style="{ background: items[2] ? items[2].color : '#E6E6E6' }"></div>
            </div>
            <div id="con">
              <div id="text" v-if="index !== null">
                <div v-if="items.length && currentItem">
                  <h2>{{currentItem.title}}</h2>
                  <p>{{currentItem.content}}</p>
                </div>
              </div>
              <div class="logo">
                <img src="./assets/logo.png" alt="logo">
              </div>
            </div>
            <div id="dot1" class="dot">
              <div :style="{ background: items[0] && index  === 0 ? items[0].color : '#E6E6E6' }" @click="setIndex(0)"></div>
              <span>{{getTitle(0)}}</span>
            </div>
            <div id="dot2" class="dot">
              <div :style="{ background: items[1] && index  === 1 ? items[1].color : '#E6E6E6' }" @click="setIndex(1)"></div>
              <span>{{getTitle(1)}}</span>
            </div>
            <div id="dot3" class="dot">
              <div :style="{ background: items[2] && index  === 2 ? items[2].color : '#E6E6E6' }" @click="setIndex(2)"></div>
              <span>{{getTitle(2)}}</span>
            </div>
            <div id="dot4" class="dot">
              <div :style="{ background: items[3] && index  === 3 ? items[3].color : '#E6E6E6' }" @click="setIndex(3)"></div>
              <span>{{getTitle(3)}}</span>
            </div>
            <div style="width: 100%; height: 100%;overflow: hidden;">
              <svg style="z-index: -10;" id="circleBox" width="100%" height="100%" viewBox="0 0 931 931" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="465.311" cy="465.311" r="390.817" transform="rotate(-102 465.311 465.311)" stroke="#E6E6E6" stroke-width="3"/>
                <path d="M132.944 259.067C19.1825 443.492 76.4666 685.22 260.891 798.982" stroke="url(#paint0_linear_4001_12)" stroke-width="4"/>
                <path d="M137.046 268.413C137.685 268.168 138.015 267.468 137.815 266.82L137.813 266.812L137.81 266.805L134.677 257.655L134.676 257.649C134.457 257.034 133.822 256.675 133.182 256.805L133.176 256.806L123.721 258.846L123.722 258.847C123.023 258.995 122.572 259.691 122.718 260.388C122.865 261.088 123.562 261.541 124.26 261.394L124.263 261.394L130.883 259.969L122.041 275.622C121.688 276.247 121.909 277.044 122.534 277.397C123.159 277.75 123.957 277.529 124.31 276.904L133.153 261.251L135.35 267.657L135.356 267.676C135.621 268.351 136.379 268.671 137.046 268.413L137.046 268.413Z" fill="#181818" stroke="black"/>
                <defs>
                  <linearGradient id="paint0_linear_4001_12" x1="128.306" y1="266.587" x2="195.299" y2="778.339" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#181818"/>
                    <stop offset="0.7" stop-color="#7E7E7E" stop-opacity="0"/>
                  </linearGradient>
                </defs>
              </svg>
            </div>
          </div>
          <div class="offerUrl">
            <a href="#">poznaj naszą ofertę</a>
          </div>
        </div>

      <div class="text" v-if="index !== null">
        <div v-if="items.length && currentItem">
          <h2>{{currentItem.title}}</h2>
          <p>{{currentItem.content}}</p>
          <div style="margin-top: 2rem">
            <a href="#">poznaj naszą ofertę</a>
          </div>
        </div>
      </div>
    </main>
    <img src="./assets/dots.png" alt="" class="dots">
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      index: null,
      timer: null,
      rotation: 0,
      box: null,
      items: [],
      loaded: false,
    }
  },
  computed: {
    currentItem() {
      return this.items[this.index];
    },
  },
  methods: {
    nextIndex() {
      if (this.index < this.items.length - 1) {
        this.setIndex(this.index+1)
      } else {
        this.setIndex(0);
      }
    },
    autoplay() {
      this.timer = setInterval(this.nextIndex, 5000);
    },
    stopAutoplay() {
      clearInterval(this.timer)
    },
    getTitle(index) {
      return this.items[index]?.title;
    },
    setIndex(index) {

      if(index !== this.index) {
        let steps = index - this.index;
        if(steps < 0) steps = this.items.length + steps;
        this.rotation += steps * 90;
        this.box.style.transition = 'transform 0.3s linear';
        this.box.style.transform = `rotate(${this.rotation}deg)`;
        this.index = index;
      }

    }
  },
  mounted() {
    this.box = document.getElementById('circleBox');
    const apiUrl = (window.API_CONFIG && window.API_CONFIG.API_URL)
        ? window.API_CONFIG.API_URL
        : 'http://localhost:8003/api';
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
          this.items = data;
    this.autoplay();
        })
        .catch(error => console.error("Błąd ładowania danych:", error));

  },

  beforeDestroy() {
    this.stopAutoplay()
  }
}
</script>
<style scoped>
  .container {
    --default-color: #E6E6E6;
    --color1: #6AB971;
    --color3: #44A5D3;
    --color4: #F3AA21CF;
    --color2: #F58220;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-inline: 2rem;
  }
  h1 {
    text-align: center;
    padding-block: 2rem;
    font-size: 4.125rem;
    text-wrap: balance;
  }
  h2 {
    text-align: center;
    padding-block: 1rem;
  }
  main {

    margin-inline: 5%;
    flex-grow: 1;
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: end;
    height: 100%;
  }
  #circle {
    width: min(100%, 80vh);
    height: auto;
    aspect-ratio: 1/1;
    position: relative;
  }


  #content {
    position: absolute;
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    div:nth-child(1) {
      background: var(--default-color);
      border-radius: 100% 0 0 0;
    }
    div:nth-child(2) {
      background: var(--default-color);
      border-radius: 0 100% 0 0;
    }
    div:nth-child(3) {
      background: var(--default-color);
      border-radius: 0 0 0 100%;
    }
    div:nth-child(4) {
      background: var(--default-color);
      border-radius: 0 0 100% 0;
    }
  }
  #con {
    position: absolute;
    top: 20%;
    left: 20%;
    right: 20%;
    bottom: 20%;
    background-color: white;
    border-radius: 100%;
    z-index: 100;
  }
  #text {
    width: 100%;
    height: 100%;
    div {
      height: 70%;
      margin: 15%;
      overflow: scroll;
    }
    p {
      text-align: center;
    }
    z-index: 110;
    line-height: 1.5;
    h2 {
      font-size: 1.625rem;
    }
  }

  #text div::-webkit-scrollbar {
    width: 4px;
  }
  #text div::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }

  .dot {
    position: absolute;
    display: flex;
    align-items: center;
    height: 10%;
    z-index: 150;
    div {
      height: 100%;
      border-radius: 50%;
      aspect-ratio: 1/1;
      background: var(--default-color);
      cursor: pointer;
    }
    span {
      font-size: 1.625rem;
      font-weight: bold;
    }
  }
  #dot1, #dot4 {
    left: 25%;
    flex-direction: row-reverse;
    transform: translateX(-100%);
    div {
      margin-left: 10px;
    }
  }
  #dot2, #dot3 {
    right: 25%;
    flex-direction: row;
    transform: translateX(100%);
    div {
      margin-right: 10px;
    }
  }
  #dot1 {
    top: 15%;
  }
  #dot2 {
    top: 15%;
  }
  #dot3 {
    bottom: 15%;
  }
  #dot4 {
    bottom: 15%;
  }
  .text {
    display: none;
  }

  .bg-image-container {
    position: relative;
  }
  .bg-image {
    position: fixed;
    bottom: 0;
    left: 5%;
    width: calc(90% * 2/5);
    height: auto;
    max-height: 90vh;
    object-fit: contain;
  }
  .dots {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateX(-50%) translateY(-30%);
  }

  .logo {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      object-fit: contain;
    }
  }

  #text ~ .logo {
    display: none;
  }

  a {
    display: block;
    margin-bottom: 2rem;
    font-weight: bold;
    text-decoration: underline;
    color: black;
    font-size: 1.375rem;
  }

  @media screen and (max-width: 1440px) {
    h1 {
      font-size: 3rem;
    }
    .dot span {
      font-size: 1.375rem;
    }
  }
  @media screen and (max-width: 999px) {
    .offerUrl {
      display: none;
    }
    .container {
      margin-inline: 60px
    }
    h1 {
      font-size: 2.75rem;
    }
    #text {
      display: none;
    }
    .bg-image-container {
      display: none;
    }
    .dots {
      display: none;
    }
    main {
      grid-template-columns: 1fr;
      flex-grow: 0;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #text ~ .logo {
      display: flex; /* lub flex/inline, zależnie od Twojego logo */
    }
    .text {
      padding-bottom: 2rem;
      display: block;
      h2 {
        font-size: 1.25rem;
      }
      p {
        font-size: 0.875rem;
      }
    }
    a {
      font-size: 1.25rem;
      text-align: center;
    }
  }

  @media screen and (max-width: 767px) {
    h1 {
      font-size: 2rem;
    }
    a {
      font-size: 1.125rem;
    }
    .container .dot span {
      font-size: 1rem;
    }
  }

  @media screen and (max-width: 479px) {
    a {
      font-size: 1rem;
    }
    .container .dot span {
      font-size: 0.875rem;
    }
  }

</style>