<template>
    <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
        <div
            class="package-label"
            :class="[this.buttonLabelSubCopy ? 'has-subheader' : '']"
            for="testradio">
            <div class="package-specs">
                <p class="m-0">
                    <span v-html="this.buttonLabel"></span>
                    <span class="pricing-info" v-html="this.buttonAuxillaryCopy"></span>
                </p>
                <p
                    class="sub-label m-0"
                    v-if="this.buttonLabelSubCopy"
                    v-html="this.buttonLabelSubCopy"></p>
                <div class="hide-when-closed">
                    <!-- Parse the body text containing <ul> with logic -->
                    <ul>
                        <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
                            <!-- no textLink -->
                            <span
                                v-if="!doesCopyContainTextLink(listItem)"
                                v-html="listItem"></span>
                            <!-- with textLink -->
                            <template
                                v-else
                                v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
                                :key="copy">
                                <span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
                                <span v-else>
                                    <textLink
                                        linkType="text"
                                        :text="getRouterLinkDisplayTextFromCopy(copy)"
                                        href="#!"
                                        @click-event="
                                            $emit('buttonEvent', {
                                                eventName: 'openModal',
                                                args: getRouterLinkRouteFromCopy(copy),
                                            })
                                        "
                                        :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" />
                                </span>
                            </template>
                        </li>
                    </ul>
                    <!-- End of body text parsing -->
                    <div
                        class="package-footer fw-bold caption ms-n6"
                        v-if="this.buttonFooterCopy"
                        v-html="this.buttonFooterCopy"></div>
                </div>
            </div>
        </div>
    </baseInputButton>
</template>

<script>
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
import textLink from "@/ux-components/text-link/text-link";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
import {
    getRouterLinkDisplayTextFromCopy,
    getRouterLinkRouteFromCopy,
    splitCopyOnCMSPlaceHolder,
    doesCopyContainTextLink,
} from "@/helpers/cms-content-helper";

export default {
    name: "servicePackageRadio",
    mixins: [inputButtonWrapperMixin],
    components: {
        baseInputButton,
        textLink,
    },
    computed: {
        arrayOfListItemsFromBodyText() {
            return this.getArrayOfListItemsFromRawCmsCopy(this.buttonBodyCopy);
        },
    },
    methods: {
        getRouterLinkDisplayTextFromCopy,
        getRouterLinkRouteFromCopy,
        splitCopyOnCMSPlaceHolder,
        doesCopyContainTextLink,
        stripUlTagFromCopy(copy) {
            const regex = /(?:<ul(?:.*?)>)|(?:<\/ul>)/g;
            return copy.replace(regex, "");
        },
        getArrayOfListItemsFromRawCmsCopy(copy) {
            const withoutUlTags = this.stripUlTagFromCopy(copy);
            return withoutUlTags
                .split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
                .filter((lineItem) => lineItem);
        },
    },
};
</script>

<style lang="scss">
.package-main {
    .package-wrapper {
        margin: 0.5rem 0;

        label {
            display: block;
        }

        input[type="radio"] {
            opacity: 0;
            position: absolute;
            left: -9999px;

            + .package-label {
                display: flex;
                align-items: flex-start;
                position: relative;
                cursor: pointer;
                width: 100%;
                padding: 1rem;
                border: 1px solid $gray-300;
                box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15),
                    0px 4px 24px -8px rgba(0, 0, 0, 0.2);
                border-radius: 0.5rem;
                overflow: hidden;
                min-height: 60px;

                &.has-subheader {
                    min-height: 80px;
                }

                &:before {
                    content: "";
                    position: relative;
                    top: 5px;
                    margin-right: 1rem;
                    border-radius: 50%;
                    border: 1px solid $gray-500;
                    width: 16px;
                    height: 16px;
                    min-width: 16px;
                }

                &:after {
                    content: "";
                    position: absolute;
                    left: 19px;
                    top: 24px;
                    border-radius: 50%;
                    width: 10px;
                    height: 10px;
                    min-width: 10px;
                }
            }

            &:hover {
                + .package-label {
                    &:before {
                        border: 1px solid #8e9292;
                        box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2);
                    }
                }
            }

            &:checked {
                + .package-label {
                    .package-specs {
                        max-height: 1000px;
                    }
                }
                + .package-label {
                    .package-specs {
                        .hide-when-closed {
                            display: block;
                        }
                    }
                }
                + .package-label {
                    background-color: $blue-100;
                    border: 1px solid $blue;
                    max-height: 500px;
                }
                + .package-label {
                    &:before {
                        box-shadow: 0px 0px 0px 1px $blue;
                    }
                }
                + .package-label {
                    &:after {
                        background: $blue;
                    }
                }
            }

            &:focus {
                + .package-label {
                    &:before {
                        border: 2px solid $blue;
                    }
                }
            }
        }

        .package-footer {
            color: $red;
        }

        .package-specs {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-height: 0;
            transition: all 0.5s ease;

            p {
                font-weight: 500;
                display: flex;
                justify-content: space-between;
                span {
                    &.pricing-info {
                        color: $green;
                        font-size: 0.875rem;
                    }
                }
                &.sub-label {
                    color: $green;
                    text-transform: uppercase;
                    font-size: 0.75rem;
                }
            }
            ul {
                margin: 1rem 0 0 -15px;
                padding: 0;
                li {
                    margin-bottom: 0.5rem;
                    font-size: 0.875rem;
                    line-height: 1.714;
                    a {
                        line-height: 1.714;
                        padding: 0;
                    }
                }
            }

            @keyframes slideaway {
                from {
                    display: block;
                }
                to {
                    transform: translateY(40px);
                    opacity: 0;
                }
            }

            .hide-when-closed {
                display: none;
            }
        }
    }
}
</style>
