<template>
  <div class="wrapper-terminal">
    <div class="header">
      <div class="round red"></div>
      <div class="round yellow"></div>
      <div class="round green"></div>
    </div>
    <div class="editor">
      <code class="code">
        <div class="screen">
          <span>## </span
          ><span>{{ $t('pages.share_pictures.comment_install') }}</span>
          <div class="upload-command">
            <span class="tilde">~</span><span>{{ textInstall }}</span>
          </div>
          <div class="entry-button-terminal">
            <Button
              look="button--transparent"
              :text="$t('pages.share_pictures.button_copy')"
              :icon="clipboardIcon"
              @trigger="copyText(textInstall)"
              class="entry-button"
            />
          </div>
        </div>
        <div class="screen">
          <span>## </span
          ><span>{{ $t('pages.share_pictures.comment_upload') }}</span>
          <div class="upload-command">
            <span class="tilde">~</span><span>{{ textUpload }}</span>
          </div>
          <div class="entry-button-terminal">
            <Button
              look="button--transparent"
              :text="$t('pages.share_pictures.button_copy')"
              :icon="clipboardIcon"
              @trigger="copyText(textUpload)"
              class="entry-button"
            />
          </div>
        </div>
      </code>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { updateClipboard } from '@/utils/copyToClipboard'
import Button from '@/components/Button.vue'
let uploadIsCopied = ref<boolean>(false)

defineProps({
  textUpload: { type: String, default: '' },
  textInstall: { type: String, default: '' }
})
const clipboardIcon = computed((): string =>
  uploadIsCopied.value ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'
)
async function copyText(text: string): Promise<void> {
  uploadIsCopied.value = await updateClipboard(text)
  setTimeout(function () {
    uploadIsCopied.value = false
  }, 1000)
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  border-top-right-radius: toRem(1.5);
  border-top-left-radius: toRem(1.5);
  background-color: var(--grey);
  padding-left: toRem(0.5);
  height: toRem(3);
  width: 100%;
}
.editor {
  border-bottom-right-radius: toRem(1.5);
  border-bottom-left-radius: toRem(1.5);
  background-color: var(--black-pale);
  width: 100%;
  position: relative;
}
.screen {
  padding: toRem(2.5) toRem(2) toRem(1.5);
  height: 100%;
}
.screen:nth-child(2n) {
  border-top: 2px solid white;
}
.upload-command {
  display: flex;
  align-items: center;
  margin-top: toRem(1);
}
.entry-button-terminal {
  margin-top: toRem(2);
  margin-left: auto;
}
.code {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--white);
  @include text(s-regular);
}
.tilde {
  color: var(--green);
  margin-right: toRem(1);
}
.round {
  height: toRem(1.5);
  width: toRem(1.5);
  border-radius: 50%;
  margin: toRem(0.5);
}
.red {
  background-color: var(--red);
}
.yellow {
  background-color: var(--yellow);
}
.green {
  background-color: var(--green);
}

@media (max-width: toRem(50)) {
  .editor {
    min-height: toRem(27);
  }
}
</style>
