<template>
    <div id="component-footer">
        <FooterSkeleton v-if="loading" />
        <template v-else>
            <div class="first-row">
                <div class="footer-container">
                    <div class="text">
                        © {{ new Date().getFullYear() }} Parceiro da Construção. <br />
                        Todos os direitos reservados.
                    </div>
                    <div class="inline-content">
                        <a href="https://diwe-pdc.s3.sa-east-1.amazonaws.com/politica.html" target="_blank" class="text">
                            Termos de uso e Política de privacidade
                        </a>
                    </div>
                </div>
            </div>
            <div class="second-row">
                <div class="footer-container">
                   
                    <div :class="!isPDCTenant && 'pdc-footer-one-logo'" v-if="!this.isPDCTenant">
                        <img :src="getUrlBucket(`companies/${this.logos[0].icon}`)" :alt="this.logos[0].title" />
                    </div>

                   <div class="brand-list">
                        <div class="wrapper" :data-count="logos.length">
                            <div class="wrapper-image" v-for="(item, item_key) in logos" :key="item_key" >
                                <img :src="getUrlBucket(`companies/${item.icon}`)" :alt="item.title" />
                            </div>
                        </div>
                   </div>

                    <el-dialog top="50px" custom-class="footer-dialog" title="Termos de uso e Política de privacidade"
                        :visible.sync="dialogVisible" width="60%">
                        <div class="modal-container-height" v-html="html"></div>
                    </el-dialog>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import Vue from 'vue';
import { Dialog } from 'element-ui';
Vue.component(Dialog.name, Dialog);
import FooterSkeleton from './FooterSkeleton.vue'
import { COMPANY_LOGOS } from '../../utils/constants'
import { makeApiUrlBucket, shuffleArray } from '../../utils/helpers'

export default {
    name: 'Footer',
    props: {
        loading: {
            type: Boolean,
            default: true,
        },
        tenant: {
            type: Object,
            default: () => ({
                id: 1,
                name: 'Parceiro da Construção',
                logo: 'https://diwe-pdc.s3.sa-east-1.amazonaws.com/foundation/logo-pdc.svg',
            })
        },
    },
    components: {
        FooterSkeleton,
    },
    computed: {
        isPDCTenant() {
            return this.tenant.id && this.tenant.id === 1;
        },
    },
    data() {
        return {
            dialogVisible: false,
            html: '',
            logos: {},
            
        };
    },
    methods: {
        getUrlBucket(url) {
           return makeApiUrlBucket(url)
        }
    },
    mounted() {
        if (this.isPDCTenant) {
            this.logos = shuffleArray(COMPANY_LOGOS);
        } else {
            this.logos = [{
                title: 'PDC',
                icon: 'pdc.svg'
            }]
        }
    }
};
</script>

<style lang="scss">
@import './styles.scss';
</style>
