<template>
  <div class="footer">
    <div class="footer-main-container">
      <div class="footer-main footer-ref">
        <div class="footer-column footer-ref" v-for="item in [1, 2, 3]" :key="item" >
          <div v-if="first_column_is_custom && item === 1" class="cover-container">
            <span class="text-small">HTML CUSTOMIZADO</span>
          </div>
          <div v-else>
            <div class="footer-title"></div>
            <template v-for="link in [1, 2, 3]">
              <div class="footer-link footer-link-ref" :key="link" v-if="item !== 2"></div>
              <div v-else-if="link === 2 && !show_manufacture_link" class="footer-link footer-link-ref hidden"></div>
              <div v-else-if="link === 3 && !show_devolution_link" class="footer-link footer-link-ref hidden"></div>
              <div v-else class="footer-link footer-link-ref"></div>
            </template>
          </div>
        </div>
        <div v-if="contact_is_custom" class="cover-container">
          <span class="text-small">HTML CUSTOMIZADO</span>
        </div>
        <div v-else-if="show_contact && !contact_is_custom" class="footer-column footer-ref">
          <div class="footer-title"></div>
          <div class="footer-contact" v-for="item in [1, 2, 3]" :key="item">
            <div class="footer-circle">
              <div class="footer-icon"></div>
            </div>
            <div class="footer-contact-text"></div>
          </div>
        </div>
      </div>
      <div class="footer-midia-brands" v-if="show_midia_brands">
        <div :class="social_midia_is_custom ? 'footer-custom-social-midia' : 'footer-dinamic-social-midia'"></div>
        <template v-if="show_icons_payment">
          <div v-if="show_payment_auto_flag" class="footer-payment-brands"></div>
          <div v-else class="cover-container">
            <span class="text-small">BANNER CUSTOMIZADO</span>
          </div>
        </template>
        <div v-if="show_custom_certificate" class="cover-container">
          <span class="text-small">BANNER CUSTOMIZADO</span>
        </div>
        <div v-if="show_certificate_content" class="footer-certificate"></div>
      </div>
    </div>
    <div class="footer-copyright">
      <div v-if="show_custom_content" class="footer-copyright-content">
        <div v-if="container_is_custom" class="cover-container">
          <span class="text-small">HTML CUSTOMIZADO</span>
        </div>
        <div v-else class="footer-custom-content">
          <div class="content"></div>
          <div class="content"></div>
        </div>
      </div>
      <div v-else>
        <div class="footer-copyright-text large"></div>
        <div class="footer-copyright-text"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  props: {
    show_midia_brands: {
      type: Boolean,
      default: false,
    },
    show_custom_content: {
      type: Boolean,
      default: false
    },
    first_column_is_custom: {
      type: Boolean,
      default: false
    },
    show_icons_payment:{
      type: Boolean,
      default: false
    },
    contact_is_custom: {
      type: Boolean,
      default: false
    },
    container_is_custom:{
      type: Boolean,
      default: false
    },
    social_midia_is_custom:{
      type: Boolean,
      default: true
    },
    show_payment_auto_flag:{
      type: Boolean,
      default: false
    },
    show_contact:{
      type: Boolean,
      default: true
    },
    show_custom_certificate:{
      type: Boolean,
      default: false
    },
    show_certificate_content:{
      type: Boolean,
      default: false
    },
    show_manufacture_link: {
      type: Boolean,
      default: false      
    },
    show_devolution_link:{
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped>
.footer {
  width: 100%;
}
.footer-main-container{
  border-top: 2px solid var(--footer-main-border-top-color);
  background-color: var(--footer-main-color);
  padding-top: 20px;
  padding-bottom: 10px;
  padding-inline: 10%;
}
.footer-main {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
}
.footer-column {
  flex: 1;
}
.footer-title {
  width: 60%;
  height: 8px;
  margin-bottom: 16px;
  background-color: var(--footer-title-color);
}
.footer-link {
  width: 50%;
  height: 8px;
  background-color: var(--footer-link-color);
}
.footer-link {
  margin-bottom: 16px;
}
.footer-link:hover {
  background-color: var(--footer-link-hover-color);
}
.footer-contact {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.footer-contact-text {
  width: 50%;
  height: 8px;
  background-color: var(--text-color);
}

.footer-circle {
  padding: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: var(--footer-circle-color);
}
.footer-icon {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--footer-icon-color);
}
.footer-copyright {
  width: 100%;
  padding: 20px 10%;
  background-color: var(--footer-copyright-color);
}
.footer-copyright-text {
  width: 50%;
  height: 8px;
  margin: 0px auto 4px;
  background-color: var(--footer-copyright-text-color);
}
.footer-copyright-text.large {
  width: 60%;
}

.footer-midia-brands{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-block: 15px;
  gap: 5px;
}

.footer-custom-social-midia{
  width: 35%;
  height: 8px;
  background-color: var(--footer-custom-social_midia_bg);
  transition: background-color 0.3s;
}

.footer-dinamic-social-midia{
  width: 35%;
  height: 8px;
  background-color: var(--footer-dinamic-social_midia_bg);
  transition: background-color 0.3s;
}

.footer-copyright-content{
  width: 100%;
}

.footer-custom-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.footer-custom-content div:nth-child(1){
  height: 8px;
  background-color: var(--footer-copyright-text-color);
  width: 80%;
}

.footer-custom-content div:nth-child(2){
  height: 8px;
  background-color: var(--footer-copyright-text-color);
  width: 60%;
}

.footer-certificate{
  background-color: var(--footer-copyright-text-color);
  height: 8px;
  width: 35%;
}

.footer-payment-brands{
  width: 35%;
  height: 8px;
  background-color: var(--footer-copyright-text-color);
}

.footer-main .cover-container {
  flex: 1;
  height: 86px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #EEEEEE 25%, #DEDEDE 50%, #EEEEEE 75%);
  background-size: 200% 100%;
  animation: loading 2s infinite ease-in-out;
  text-align: center;
}

.footer-midia-brands .cover-container {
  width: 35%;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #EEEEEE 25%, #DEDEDE 50%, #EEEEEE 75%);
  background-size: 200% 100%;
  animation: loading 2s infinite ease-in-out;
  text-align: center;
}

.footer-copyright .cover-container {
  flex: 1;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #EEEEEE 25%, #DEDEDE 50%, #EEEEEE 75%);
  background-size: 200% 100%;
  animation: loading 2s infinite ease-in-out;
  text-align: center;
}

.cover-container span{
  color: rgb(107, 102, 102);
  font-weight: 600;
}


@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

</style>
