import { ref, reactive, computed } from 'vue'
import axios from 'axios'

export function useSignupForm(event, participantData) {
    const currentStep = ref(1)
    const submitting = ref(false)
    const summaryLoading = ref(false)
    const submitResult = ref(null) // null | { type: 'success'|'exists', data: {} }

    const selectedAddons = reactive({})

    const formData = reactive({
        eatingHabit: 'EATING_HABIT_VEGAN',
        userId: participantData.id,
        eventId: event.id,
        vorname: participantData.firstname ?? '',
        nachname: participantData.lastname ?? '',
        pfadiname: participantData.nickname ?? '',
        localGroup: participantData.localGroup ?? '-1',
        geburtsdatum: participantData.birthday ?? '',
        address1: participantData.address_1 ?? '',
        address2: participantData.address_2 ?? '',
        plz: participantData.postcode ?? '',
        ort: participantData.city ?? '',
        telefon_1: participantData.phone ?? '',
        email_1: participantData.email ?? '',
        participationType: '',
        ansprechpartner: '',
        telefon_2: '',
        email_2: '',
        badeerlaubnis: '-1',
        sibling: '-1',
        first_aid: '-1',
        participant_group: '',
        beitrag: 'regular',
        arrival: event.arrivalDefault ?? '',
        departure: event.departureDefault ?? '',
        anreise_essen: '1',
        abreise_essen: '2',
        foto: { socialmedia: false, print: false, webseite: false, partner: false, intern: false },
        allergien: participantData.allergies ?? '',
        intolerances: participantData.intolerances ?? '',
        medikamente: participantData.medications ?? '',
        tetanusVaccination: participantData.tetanusVaccination ?? '',
        essgewohnheit: 'vegetarian',
        anmerkungen: '',
        summary_information_correct: false,
        summary_accept_terms: false,
        legal_accepted: false,
        payment: false,
    })

    const summaryAmount = ref('')

    const goToStep = async (step) => {
        if (step === 9) {
            summaryLoading.value = true
            summaryAmount.value = ''
            try {
                const res = await axios.post('/api/v1/event/' + event.id + '/calculate-amount', {
                    arrival: formData.arrival,
                    departure: formData.departure,
                    event_id: event.id,
                    participation_group: formData.participant_group,
                    selected_amount: formData.beitrag,
                    addons: selectedAddons,
                    participationType: formData.participationType,
                    beitrag: formData.beitrag,
                    sibling: formData.sibling,
                })
               summaryAmount.value = res.data.amount
            } finally {
                summaryLoading.value = false
            }
        }
        currentStep.value = step
    }

    const submit = async () => {
        if (!formData.summary_information_correct || !formData.summary_accept_terms || !formData.legal_accepted || !formData.payment) {
            return
        }
        submitting.value = true
        try {
            const res = await axios.post('/api/v1/event/'+ event.id + '/signup', {
                addons: selectedAddons,
                registration_data: { ...formData },
            })
            submitResult.value = {
                status: res.data.status,
                participant: res.data.participant,
            }
        } finally {
            submitting.value = false
        }
    }

    return { currentStep, goToStep, formData, selectedAddons, submit, submitting, submitResult, summaryLoading, summaryAmount }
}
