<template>
    <div>
        <div
            class="review-toggle d-flex align-items-center justify-content-between"
            :class="[isExpanded ? 'expanded' : '']"
            @click="toggleIsExpanded">
            <a
                aria-label="expand appointment details"
                href="javascript:void(0)"
                class="d-flex py-0">
                <span class="label">Appointment details</span>
            </a>
        </div>
        <div class="review-table">
            <serviceLocationReview
                :linkVisible="isExpanded"
                cmsWidgetName="ServiceLocationWidget"
                :serviceLocation="serviceLocationInfo"
                @edit-clicked="editServiceLocation" />
            <scheduleReview
                :linkVisible="isExpanded"
                cmsWidgetName="ScheduleWidget"
                @edit-clicked="editSchedule" />
            <hr class="section-divider" />
            <div class="review-table-expander">
                <vehicleReview
                    :linkVisible="true"
                    cmsWidgetName="VehicleReviewWidget"
                    @edit-clicked="editVehicle" />
                <hr class="section-divider" />
                <customerReview
                    :linkVisible="true"
                    cmsWidgetName="CustomerReviewWidget"
                    @edit-clicked="editCustomer" />
                <hr class="section-divider" />
            </div>
        </div>
    </div>
</template>

<script>
// import textBlock from '@/digital-components/text-block/text-block.vue';
import customerReview from '@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.vue';
import scheduleReview from '@/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review.vue';
import serviceLocationReview from '@/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue';
import vehicleReview from '@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review.vue';

import { useMainStore } from '@/store';

export default {
    name: 'review-dropdown',
    components: {
        customerReview,
        scheduleReview,
        serviceLocationReview,
        vehicleReview
    },
    props: {},
    data() {
        return {
            isExpanded: false
        };
    },
    computed: {
        vehicleInfo() {
            return useMainStore().vehicle;
        },
        serviceLocationInfo() {
            return useMainStore().order.serviceLocation;
        },
        appointmentType() {
            return useMainStore().order.serviceLocation.appointmentType;
        },
        customerInfo() {
            return useMainStore().contactInfo;
        }
    },
    emits: ['edit-clicked'],
    methods: {
        toggleIsExpanded() {
            this.isExpanded = !this.isExpanded;
        },
        editServiceLocation() {
            this.$emit('edit-clicked', 'location');
        },
        editSchedule() {
            this.$emit('edit-clicked', 'schedule');
        },
        editVehicle() {
            this.$emit('edit-clicked', 'vehicle');
        },
        editCustomer() {
            this.$emit('edit-clicked', 'customer');
        }
    }
};
</script>

<style lang="scss" scoped>
@import "@/styles/ux-variables-svg-strings.scss";

.dark-header {
    color: $black;
    line-height: 1.6;
}

.review-table-expander {
    max-height: 0;
    transition: $transition-swing;
    overflow: hidden;
}

.section-divider {
    margin-top: 1.5rem;
    margin-bottom: 1.875rem;
}

.review-toggle {
    margin-bottom: .625rem;
    flex-direction: row;
    &:after {
        content: "";
        transition: transform none;
        background-image: url(~@/assets/img/icons/chevron-circle_review_dropdown.png);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 1.25rem 1.25rem;
        width: 1.25rem;
        height: 1.25rem;
        display: inline-flex;
        cursor: pointer;
    }
    &.expanded:after {
        transform: rotate(180deg);
    }
    &.expanded + .review-table .review-table-expander {
        max-height: 24rem;
        overflow: hidden;
        visibility: visible;
    }
    a {
        text-decoration: none;
    }
    .label {
        color: $black;
        font-weight: 500;
        line-height: 1.625rem;
    }
}
</style>
