<template>
    <div class="donation-block">
        <form ref="donationForm" id="donation-form" @submit.prevent>
            <div class="row g-0">
                <div class="col-12">
                    <p class="headline text-center" v-html="DonationHeadline"></p>
                </div>
            </div>
            <div class="row-align d-flex px-4">
                <div>
                    <img class="w-100 mt-1 me-4" :src="LogoImage" />
                </div>
                <div>
                    <p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
                    <span class="caption mb-0" v-html="DonationBodyText"></span>
                    &nbsp;
                    <textLink
                        linkType="newWindowLink"
                        text="Learn more"
                        :href="DonationBodySubText"
                        target="_blank" />
                </div>
            </div>
            <div
                class="px-4"
                :class="[showDonationSuccess ? 'hide-donation-block' : 'show-donation-block']">
                <div class="row">
                    <div class="col-12">
                        <div class="donation-slider my-4">
                            <input
                                name="amount"
                                id="one"
                                type="radio"
                                :value="donationValues[0]"
                                checked />
                            <label for="one" class="label">$1</label>
                            <input
                                name="amount"
                                id="three"
                                type="radio"
                                :value="donationValues[1]" />
                            <label for="three" class="label">$3</label>
                            <input
                                name="amount"
                                id="five"
                                type="radio"
                                :value="donationValues[2]" />
                            <label for="five" class="label">$5</label>
                            <div class="indicator-bar"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <buttonMain
                            ref="buttonMain"
                            :buttonText="DonationAddButtonCopy"
                            loaderColor="blue"
                            class="w-100 mb-2 custom-secondary"
                            @click-event="handleDonationAction" />
                    </div>
                </div>
            </div>
            <div class="row px-4">
                <div class="col-12">
                    <div
                        v-if="showDonationSuccess"
                        class="d-flex justify-content-center align-items-center btn-success w-100 mb-2"
                        v-html="DonationThanksAlertWidget"></div>
                </div>
            </div>
            <div class="row px-4">
                <div class="col">
                    <alert
                        v-if="showDonationError"
                        cmsWidgetName="DonationErrorWidget"
                        alertClass="alert-danger" />
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p class="mt-2 mb-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import textLink from "@/ux-components/text-link/text-link";
import alert from "@/ux-components/alert/alert";
import buttonMain from "@/ux-components/button-main/button-main";
export default {
    name: "donationBlock",
    props: {
        cmsWidgetName: String,
        modelValue: String,
        showDonationSuccess: Boolean,
        showDonationError: Boolean,
        donationValues: Array,
    },
    computed: {
        DonationHeadline() {
            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
        },
        DonationSubHeadline() {
            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
        },
        DonationBodyText() {
            return this.getCmsContent(this.cmsWidgetName, "BodyText");
        },
        DonationBodySubText() {
            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
        },
        DonationAddButtonCopy() {
            return this.getCmsContent("DonationAddButtonWidget", "Text");
        },
        DonationThanksAlertWidget() {
            return this.getCmsContent("DonationThanksAlertWidget", "Text");
        },
        DonationFooterText() {
            return this.getCmsContent(this.cmsWidgetName, "FooterText");
        },
        LogoImage() {
            return this.getCmsContent("DonationWidget", "Image");
        },
        selectedValue: {
            get: function () {
                return this.modelValue?.toString();
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
                this.$emit("DonationAddedEvent");
            },
        },
    },
    methods: {
        handleDonationAction() {
            const selectedAmount = this.$refs.donationForm.elements.amount?.value;
            if (selectedAmount) {
                this.selectedValue = selectedAmount;
            }
        },
        removeLoader() {
            this.$refs.buttonMain.removeLoader();
        },
    },
    components: {
        textLink,
        alert,
        buttonMain,
    },
};
</script>

<style lang="scss" scoped>
.donation-block {
    padding: 1rem 0 0 0;
    background-color: $gray-100;
    border-radius: 0;

    .hide-donation-block {
        max-height: 0;
        overflow: hidden;
        margin-top: 1rem;
        opacity: 0;
        transition: all 250ms ease-in;
    }

    .show-donation-block {
        max-height: 136px;
        overflow: hidden;
        margin-top: 0;
        opacity: 1;
        transition: all 250ms ease-in;
    }

    p {
        &.headline {
            font-family: AvertaBold;
            color: $red;
            font-weight: 600;
        }

        &.subheadline {
            font-family: AvertaBold;
            font-weight: 600;
        }
    }

    :deep(a) {
        &.new-window-link {
            color: $blue;
            font-size: 0.75rem;
        }
    }

    img {
        width: 5rem;
    }

    .donation-slider {
        position: relative;
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        background: $blue-100;
        border-radius: 3rem;
        box-shadow: 0px 0px 4px 1px rgba(0, 112, 209, 1) inset;
        font-size: 0.875rem;
        .label {
            position: relative;
            display: inline-flex;
            width: 33.3333%;
            height: 3rem;
            padding: 0;
            cursor: pointer;
            transition: color 200ms ease-out;
            align-items: center;
            justify-content: center;
            color: $blue;
            z-index: 1;
        }
        .indicator-bar {
            width: 33.3333%;
            height: 3rem;
            position: absolute;
            top: 0;
            left: -2rem;
            background: $blue;
            border-radius: 3rem;
            box-shadow: 0px 0px 0px 1px rgba(0, 112, 209, 1) inset;
            transition: transform 750ms cubic-bezier(0.02, 0.94, 0.09, 0.97);
            transform: translate3d(2rem, 0, 0);
        }
        .indicator-bar {
            background: $blue;
        }
        input {
            &#one:checked {
                ~ .indicator-bar {
                    transform: translateX(2rem);
                }
            }
            &#three:checked {
                ~ .indicator-bar {
                    transform: translateX(calc(100% + 2rem));
                }
            }
            &#five:checked {
                ~ .indicator-bar {
                    transform: translateX(calc(200% + 2rem));
                }
            }
        }

        input:checked {
            + label {
                color: $white;
            }
        }
        input[type="radio"] {
            &:not(:checked),
            &:checked {
                position: absolute;
                left: -999999px;
                display: none;
            }
        }
    }
    .alert {
        border: 1px solid $red;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .btn-success {
        background: $green-100;
        border: 1px solid $green-400;
        border-radius: 0.5rem;
        height: 3rem;
        padding: 0.5rem;
        font-weight: 600;
        &:before {
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 16'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%230C7E47' d='M8.5 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M.5 0h16v16H.5z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
            width: 1rem;
            height: 0.95rem;
            position: relative;
            left: -0.25rem;
        }
    }
    .custom-secondary {
        &:hover {
            color: $blue;
            background: transparent;
            border: 1px solid $blue;
        }
    }
}
</style>
