import { ref } from 'vue'

export default function myPlugin() {
  return {
    apply: 'RadiogroupElement',
    setup(props, context, component) {
        const myRef = ref(null)
        console.log('component',component.form$.value,context)
        
        const disqualifyValues = context?.attrs?.disqualify?.split(',').map(val => val.trim()) || []
        console.log('Disqualify Values:', disqualifyValues)

        const radioValue = ref(component.value)

        // Watch the value of the radio group
        watch(radioValue, (newValue) => {
            if (!disqualifyValues.includes(newValue)) {
            console.log('Selected value is not disqualified:', newValue)
            myRef.value = `Selected value: ${newValue}`
            } else {
            console.log('Selected value is disqualified:', newValue)
            myRef.value = 'This option is disqualified'
            console.log('component element',component.form$.value.$el)
            component.form$.value.$el.setAttribute('disqualify',true) 
            // context.emit('handleDisqualifyStep')
            }
        })

        watch(() => component.value, (newValue) => {
            radioValue.value = newValue
        })

        // const checkDisqualification = () => {
        //     if (disqualifyValues.includes(radioValue.value)) {
        //     console.log('Selected value is disqualified:', radioValue.value)
        //     myRef.value = 'This option is disqualified'
            
        //     // Navigate to the disqualification step
        //     if (context.$emit) {
        //         context.$emit('go-to-step', 'disqualification')
        //     }
        //     } else {
        //     console.log('Selected value is not disqualified:', radioValue.value)
        //     myRef.value = `Selected value: ${radioValue.value}`
        //     }
        // }
    
        // const handleNextStep = () => {
        //     checkDisqualification()
        // }
    
        // // Watch the form submission or next button click event
        // onMounted(() => {
        //     component.on('next-step', handleNextStep)
        // })
    
        // onBeforeUnmount(() => {
        //     component.off('next-step', handleNextStep)
        // })
    
        // // Update the radioValue when component.value changes
        // watch(() => component.value, (newValue) => {
        //     radioValue.value = newValue
        // })

        return {
            ...component,
            myRef,
        }
    },
  }
}