<template>
    <div class="decalage_cont"
         :class="[
            `decalage_cont--${position}`
        ]"
    >
        <div class="decalage"
             :class="[
                 `decalage--${tone}`,
                 `decalage--${position}`
             ]"
             >
            <div class="decalage_inner">
                <DsHeading v-if="$slots.title" :tone="titleTone" as="h2" textcase="uppercase">
                  <slot name="title" />
                </DsHeading>
                <slot />
                <div class="decalage_button_wp">
                    <div v-if="resolvedLienCta" class="decalage_button">
                        <DsButton :to="resolvedLienCta" variant="white" textColor="default" borderColor="none">Candidater à nos projets</DsButton>
                    </div>
                    <div v-if="ensavoirplusTarget" class="decalage_button">
                        <DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget, ensavoirplusGroup)">En savoir +</DsButton>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { computed } from 'vue'
    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
    import DsText from '@root/design-system/primitives/DsText.vue'
    import DsButton from '@root/design-system/primitives/DsButton.vue'
    const props = defineProps({
        tone: { type: String, default: 'default' },
        titleTone: { type: String, default: 'default' },
        buttonTone: { type: String, default: 'default' },
        position: { type: String, default: 'left' },
        cta: { type: String, default: '' },
        lienCta: { type: String, default: '' },
        ensavoirplusTarget: { type: String, default: '' },
        ensavoirplusGroup: { type: String, default: '' },
    })

    const resolvedLienCta = computed(() => props.lienCta || props.cta)

    function toggleTarget(ensavoirplusTarget, ensavoirplusGroup) {
        const target = document.getElementById(ensavoirplusTarget)
        if (!target) return

        const isHidden = target.classList.contains('decalage_ensavoirplus--hidden')

        if (ensavoirplusGroup) {
            document
                .querySelectorAll(`[data-ensavoirplus-group="${ensavoirplusGroup}"]`)
                .forEach((element) => {
                    if (element.id !== ensavoirplusTarget) {
                        element.classList.add('decalage_ensavoirplus--hidden')
                    }
                })
        }

        target.classList.toggle('decalage_ensavoirplus--hidden', !isHidden)
    }
</script>

<style lang="scss">
    .decalage_cont {

        margin-bottom: 30px;
        min-height: 240px;
        display: flex;
        &--left {
            justify-content: flex-start;
            .decalage_inner > * {
                justify-self: end;
            }
        }
        &--right {
            justify-content: flex-end;
            .decalage_inner > * {
                justify-self: start;
            }
        }
    }

    .decalage {
        padding-top: 50px;
        padding-bottom: 40px;
        display: flex;
        
        @media (min-width: 0px) and (max-width: 700px) {
            width: 89vw;
        }
        @media (min-width: 700px) {
          width: 67vw;
        }
        @media (min-width: 800px) {
          width: 60vw;
        }

        /* tons = arrière-plan section */
        &--default { background: transparent; }
        &--brand   { background: var(--c-brand_rouge);}
        &--dark    { background: var(--c-backgroud-black); }
        &--brandreverse    { background: var(--c-backgroud-brandreverse); }
        &--jaune { background: var(--c-background-jaune); }

        /* position = arrière-plan section */
        &--right {
            .decalage_inner {
                padding-right: 20px;
                padding-left: 50px;
                
                @media (max-width: 599px) {
                    padding-right: 15px;
                    padding-left: 40px;
                }
            }
            .decalage_button {
                text-align: left;
            }
        }

        &--left {
            justify-content: flex-end;
           
            .decalage_inner {
                padding-right: 50px;
                padding-left: 20px;
                
                @media (max-width: 599px) {
                    padding-right: 40px;
                    padding-left: 15px;
                  }
            }
            h2 {
                text-align: right;
            }
            .decalage_button {
                text-align: right;
            }
            .decalage_button_wp {
                justify-content: flex-end;
            }
            
        }

        .decalage_button_wp {
            margin-top: 32px;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
    }

    .decalage_inner {
        h2 {
            padding-bottom: 5px;
        }
        @media (min-width: 0px) {
            width: 100%;                
        }
        @media (min-width: 600px) {
            width: calc(290px + 39vw);
        }
        @media (min-width: 700px) {
            width: calc(330px + 17vw);
        }
        @media (min-width: 800px) {
            width: calc(330px + 17vw);
        }   
        @media (min-width: 900px) {
            width: 600px;
        }
        @media (min-width: 1000px) {
            width: 600px;
        }
        @media (min-width: 1100px) {
            width: 600px;
        }
        @media (min-width: 1200px) {
            width: 600px;
        }
        @media (min-width: 1300px) {
            width: 600px;
        }
        @media (min-width: 1400px) {
            width: 600px;
        }
        @media (min-width: 1500px) {
            width: 600px;
        }
    }

    .decalage_ensavoirplus--hidden {
        display: none;
    }
</style>
