<template>
  <main class="entry-page">
    <section id="sec-1" class="section-upload">
      <div class="wrapper-upload">
        <div class="wrapper-upload-text">
          <h1 class="upload-title">{{ $t('pages.share_pictures.title') }}</h1>
          <div class="wrapper-check">
            <div class="wrapper-img-icon">
              <i class="bi bi-images img-icon"></i>
            </div>
            <div class="element-check">
              <span class="block-check"
                ><span class="check-border">✔</span
                >{{ $t('pages.share_pictures.photo_type1') }}</span
              >
              <span class="block-check"
                ><span class="check-border">✔</span
                >{{ $t('pages.share_pictures.photo_type2') }}</span
              >
              <span class="block-check"
                ><span class="check-border">✔</span
                >{{ $t('pages.share_pictures.photo_type3') }}</span
              >
              <span class="block-check"
                ><span class="check-border">✔</span
                >{{ $t('pages.share_pictures.photo_type4') }}</span
              >
            </div>
          </div>
          <p
            v-if="authConf && authConf.license && authConf.license.url"
            class="upload-text"
            v-html="
              $t('pages.share_pictures.description', {
                check: checkImg,
                licenseUrl: authConf.license.url,
                licenseName: authConf.license.id
              })
            "
          />
          <p class="upload-text">
            {{ $t('pages.share_pictures.footer_block') }}
          </p>
          <div
            v-if="
              !isLogged && authConf && authConf.auth && authConf.auth.enabled
            "
            class="wrapper-account"
          >
            <h4 class="account-subtitle">
              {{ $t('pages.share_pictures.sub_title') }}
            </h4>
            <div class="entry-link">
              <Link
                :text="$t('pages.share_pictures.user_account_button')"
                type="external"
                look="button button--blue"
                :path-external="
                  getAuthRoute('auth/login', 'partager-des-photos')
                "
              />
            </div>
          </div>
        </div>
        <div class="entry-image">
          <div class="image">
            <img
              src="@/assets/images/upload.png"
              :alt="$t('pages.share_pictures.alt_img_upload')"
            />
          </div>
        </div>
      </div>
    </section>
    <div class="entry-button-down">
      <Link
        :href="hrefSection"
        type="external"
        :icon="icon"
        look="button--rounded"
        @trigger="triggerHref"
      />
    </div>
    <section id="sec-2" class="section-upload">
      <div class="wrapper-upload">
        <div class="entry-terminal">
          <div class="terminal">
            <Terminal
              :text-upload="terminalText"
              :text-install="terminalTextInstall"
            />
          </div>
        </div>
        <div class="wrapper-upload-text">
          <h2 class="upload-title">
            {{ $t('pages.share_pictures.title_terminal') }}
          </h2>
          <p
            class="upload-text"
            v-html="$t('pages.share_pictures.description_terminal')"
          ></p>
          <div
            v-if="authConf && authConf.license && authConf.license.url"
            class="upload-text grey"
          >
            <p>
              {{
                $t('pages.share_pictures.footer_description_terminal', {
                  word: 'la license'
                })
              }}
            </p>
            <Link
              :href="authConf.license.url"
              :text="authConf.license.id"
              target="_blank"
              type="external"
              look="link--grey"
              @trigger="triggerHref"
            />
          </div>
          <div class="wrapper-account">
            <h4 class="account-subtitle">
              {{ $t('pages.share_pictures.cli_title') }}
            </h4>
            <div class="entry-link">
              <Link
                :text="$t('pages.share_pictures.button')"
                type="external"
                look="button button--blue"
                path-external="https://gitlab.com/geovisio/cli"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script lang="ts" setup>
import Link from '@/components/Link.vue'
import Terminal from '@/components/Terminal.vue'
import { useCookies } from 'vue3-cookies'
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { getAuthRoute } from '@/utils/auth'
import authConfig from '../composables/auth'
const { cookies } = useCookies()
const { t } = useI18n()
const { authConf } = authConfig()
const route = useRoute()

let hrefSection = ref<string>('#sec-2')
let icon = ref<string>('bi bi-chevron-down')
const checkImg =
  "<span style='background:white; padding: 5px 0.0525px;border-radius:50%; font-size:8px;'>✔</span>"

const isLogged = computed((): boolean => !!cookies.get('user_id'))
const terminalText = computed((): string => {
  const url = import.meta.env.VITE_API_URL
    ? import.meta.env.VITE_API_URL
    : 'https://panoramax.ign.fr/'
  return t('pages.share_pictures.terminal_text', { url })
})
const terminalTextInstall = computed((): string =>
  t('pages.share_pictures.terminal_install')
)
function triggerHref(): void {
  icon.value =
    route.hash === '#sec-2' ? 'bi bi-chevron-down' : 'bi bi-chevron-up'
  hrefSection.value = route.hash === '#sec-2' ? '#sec-1' : '#sec-2'
}
</script>

<style lang="scss" scoped>
.upload-title {
  @include text(h1);
}
.account-subtitle {
  @include text(h4);
}
.entry-link {
  margin-top: toRem(1);
}
.upload-text {
  @include text(m-regular);
  margin-top: toRem(5);
}
.wrapper-check {
  position: relative;
  width: fit-content;
  padding: toRem(3);
  background-color: var(--white);
  border-radius: toRem(1.4);
  font-size: toRem(1.6);
  margin-top: toRem(8);
}
.wrapper-img-icon {
  background-color: var(--black);
  border-radius: 50%;
  position: absolute;
  height: toRem(5.5);
  width: toRem(5.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: toRem(3);
  top: toRem(-3);
  left: 50%;
  transform: translate(-50%);
}
.img-icon {
  color: var(--white);
}
.element-check {
  display: flex;
  flex-direction: column;
  margin-top: toRem(3);
}
.block-check {
  margin-bottom: toRem(1);
  display: flex;
}
.check-border {
  display: flex;
  justify-content: center;
  align-items: center;
  width: toRem(2.2);
  height: toRem(2.2);
  border-radius: 50%;
  font-size: toRem(0.8);
  background: var(--white);
  border: toRem(0.1) solid var(--black);
  margin-right: toRem(0.5);
}
.block-check:last-child {
  margin-bottom: 0;
}
.section-upload {
  height: 100%;
  padding-right: toRem(2);
  padding-left: toRem(2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80vh;
}
.section-upload:first-child {
  background-color: rgba(236, 236, 236, 0.5);
}
.wrapper-upload {
  display: flex;
  align-items: initial;
  justify-content: center;
}
.wrapper-upload-text {
  width: 40%;
  white-space: pre-wrap;
}
.grey {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: var(--grey-semi-dark);
  p {
    margin-bottom: 0;
    margin-right: toRem(0.5);
  }
}
.wrapper-account {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: toRem(3);
  padding-top: toRem(1);
  border-top: toRem(0.1) solid #e6e6e6;
}
.upload-button {
  display: flex;
  margin-top: toRem(3);
}
.image {
  background-color: var(--white);
  border-radius: toRem(1);
  padding: toRem(1);
  border: 1px solid var(--black);
  width: 75%;
  height: fit-content;
}
.entry-image {
  display: flex;
  justify-content: center;
  width: 35%;
  overflow: hidden;
  margin-left: toRem(6);
}
.entry-terminal {
  margin-left: 0;
  margin-right: toRem(6);
}
.entry-image img {
  width: 100%;
  border-radius: toRem(1);
}
.entry-button-down {
  z-index: 1;
  position: fixed;
  right: toRem(2);
  bottom: calc(20vh - #{toRem(10.5)});
}
@media (max-width: toRem(102.4)) {
  .section-upload {
    height: initial;
  }
  .wrapper-upload {
    flex-direction: column-reverse;
    padding-top: toRem(6);
    padding-bottom: toRem(6);
  }
  .wrapper-upload-text {
    width: 100%;
  }
  .entry-image {
    display: none;
  }
  .entry-terminal {
    width: 100%;
    justify-content: initial;
  }
  .terminal {
    width: 100%;
    margin-top: toRem(4);
  }
}
@media (max-width: toRem(76.8)) {
  .entry-page {
    padding-top: toRem(11);
  }
  .entry-image {
    width: 60%;
    margin-right: 0;
    margin-left: 0;
  }
  .entry-terminal {
    width: 100%;
  }
  .wrapper-upload-text {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: toRem(50)) {
  .entry-page {
    min-height: calc(100vh - #{toRem(11)});
    padding-top: toRem(11);
  }
  .entry-image {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
  .image {
    width: 100%;
  }
  .wrapper-upload-text {
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .upload-text {
    margin-bottom: toRem(3);
  }
  .wrapper-account {
    padding-top: toRem(3);
    flex-direction: column;
  }
  .account-subtitle {
    margin-bottom: toRem(2);
  }
  .entry-button-down {
    display: none;
  }
}
</style>
