<template>
    <div class="windshield-options">
        <windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion"
            :isAvailable=isWindshieldDamageLocation
            :suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
            groupName="WindshieldDamageTypeQuestion"
            v-model="selectedWindshieldDamageTypeValues"
            :validationRules="windshieldDamageTypeQuestionValidationRules"
        />
        <alert
            class="my-3"
            cmsWidgetName="NoReplacementAvailableError"
            v-show="showNoReplacementAvailableError"
            alertClass="alert-danger"
            :isDismissible="false"
          />
        <windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion" 
            :isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
            groupName="WindshieldChipCountQuestion"
            v-model="selectedWindshieldChipCountValues"
            validationRules="windshield-chip-count-required"
        />
        <replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
            :isAvailable=isReplaceOptionSelected
            isMultiSelect
            groupName="WindshieldReplaceOptions"
            v-model="selectedWindshieldReplaceOptionsValues"
            validationRules="windshield-replace-options-required|prevent-split-and-single-together"
            :suppressError="hasSplitSingleConflict"
            isRequired
        />
        <alert
            class="my-3"
            cmsWidgetName="SplitSingleConflict"
            v-show="hasSplitSingleConflict"
            alertClass="alert-danger"
            :isDismissible="false"
          />
    </div>
</template>

<script>
import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import alert from "@/ux-components/alert/alert";

import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";

// DEFINE VALIDATION RULES
defineRule("windshield-damage-type-required", required(errorMessages.WINDSHIELD_DAMAGE_TYPE_REQUIRED));
defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_CHIP_COUNT_REQUIRED));
defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));

defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => {
    if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) && 
        otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) && 
        Array.isArray(otherFieldValue) && 
        otherFieldValue.length > 1) 
    {
        return false;
    }
    return true;
});
defineRule("repair-only", (value) => {
    if (value.toString().toUpperCase() === damageLocationsSelected.REPAIR.toUpperCase()) {
        return true;
    }
    return false;
});
defineRule("prevent-split-and-single-together", (value) => {
    if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) && 
        (value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) || 
        value.toString().toUpperCase().includes(damageLocationsSelected.PASSENGER.toUpperCase())))
    {
        return false;
    }
    return true;
});

export default ({
    name: "windshieldOptions",

    data(){
        return {
            windshieldAvailableReplacementOptions: Object,
        }
    },

    props: {
        modelValue: Array,
        selectedDamageLocations: Array,
        hasRepairReplaceConflict: Boolean,
        hasSplitSingleConflict: Boolean,
    },

    methods: {
        initializeComponent(windshieldAvailableReplacementOptions){
            this.windshieldAvailableReplacementOptions = windshieldAvailableReplacementOptions;
            this.$refs.replaceOptionsQuestion.initializeComponent(windshieldAvailableReplacementOptions);
        },
        getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
            // ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL)
            return {
                selectedWindshieldDamageType: selectedWindshieldDamageType ? selectedWindshieldDamageType : this.selectedValues.selectedWindshieldDamageType,
                selectedWindshieldChipCount: selectedWindshieldChipCount ? selectedWindshieldChipCount : this.selectedValues.selectedWindshieldChipCount,
                selectedWindshieldReplaceOptions: selectedWindshieldReplaceOptions ? selectedWindshieldReplaceOptions : this.selectedValues.selectedWindshieldReplaceOptions,
            }
        },
    },
    computed: {
        selectedValues: {
            get: function() {
                return this.modelValue;
            },
            set: function(newValue) {
                this.$emit("update:modelValue", newValue);
            }
        },
        selectedWindshieldDamageTypeValues:{
            get: function() {
                return this.selectedValues.selectedWindshieldDamageType;
            },
            set: function(newValue) {
                this.selectedValues = this.getWindshieldOptions(newValue, null, null);
            }
        },
        selectedWindshieldChipCountValues: {
            get: function() {
                return this.selectedValues.selectedWindshieldChipCount;
            },
            set: function(newValue) {
                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, null);
            }
        },
        selectedWindshieldReplaceOptionsValues: {
            get: function() {
                return this.selectedValues.selectedWindshieldReplaceOptions;
            },
            set: function(newValue) {
                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, null, newValue);
            }
        },
        isWindshieldDamageLocation() {
            return this.selectedDamageLocations.some(selectedDamages => 
                {
                    return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
                });
        },
        isRepairOptionSelected(){
            if (!this.selectedWindshieldDamageTypeValues) return false;

            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
        },
        isReplaceOptionSelected(){
            if (!this.selectedWindshieldDamageTypeValues) return false;

            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
        },
        isWindshieldReplaceAvailable() {
            return !(Array.isArray(this.windshieldAvailableReplacementOptions) && this.windshieldAvailableReplacementOptions.length < 1);
        },
        isSplitWindshieldOption() {
            const options = this.windshieldAvailableReplacementOptions.toString().toUpperCase();
            if (options.includes('DRIVER') && options.includes('PASSENGER')) {
                return true;
            }
            return false;
        },
        showNoReplacementAvailableError() {
            if (this.isReplaceOptionSelected && !this.isWindshieldReplaceAvailable) {
                return true;
            }
            return false;
        },
        windshieldDamageTypeQuestionValidationRules() {
            // Note: the validation rules string is not dynamic (it cannot be changed once component has been created)
            let validationRules = "windshield-damage-type-required|check-for-repair-and-replace:@DamageLocationQuestion";
            // if vehicle has no windshield replacement option
            if (!this.isWindshieldReplaceAvailable) {
                validationRules = validationRules.concat('|repair-only');
            }
            return validationRules;
        }
    },
    components: {
        windshieldDamageTypeQuestion,
        windshieldChipCountQuestion,
        replaceOptionsQuestion,
        alert,
    },
})
</script>