<template>
    <div class="row">
        <div class="col">
            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
            <div class="row" v-show="!isLoading">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col">
                            <h6 class="all-caps m-b-0 bold">Payment Attempt Limit</h6>
                            <div class="font-heading fs-10 all-caps muted">Set the payment grace duration before the attempts expires</div>
                        </div>
                    </div>
                    <div class="row  justify-content-center m-b-20">
                        <div class="col-8 bg-master-dark padding-15 b-rad-lg">
                            <div class="row justify-content-center">
                                <div class="col-3 p-r-5 p-l-5">
                                    <div class="form-group no-margin form-group-default bg-master b-rad-lg p-r-0 p-l-0 p-b-10">
                                        <label class="muted fade fs-8 lh-10 p-b-10">Days</label>
                                        <input type="text" class="form-control text-center text-success font-orbitron fs-25" v-model.lazy="days" v-maska data-maska="##">
                                    </div>
                                </div>
                                <div class="col-auto p-r-5 p-l-5">
                                    <div class="row h-100 align-items-center">
                                        <div class="col">
                                            <div class="font-heading fs-25 p-b-10 blink text-white">:</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3 p-l-5 p-r-5">
                                    <div class="form-group no-margin form-group-default bg-master b-rad-lg p-r-0 p-l-0 p-b-10">
                                        <label class="muted fade fs-8 lh-10 p-b-10">Hours</label>
                                        <input type="text" class="form-control text-center text-success font-orbitron fs-25" v-model.lazy="hours" v-maska data-maska="##">
                                    </div>
                                </div>
                                <div class="col-auto p-r-5 p-l-5">
                                    <div class="row h-100 align-items-center">
                                        <div class="col">
                                            <div class="font-heading fs-25 p-b-10 blink text-white">:</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3 p-l-5 p-r-5">
                                    <div class="form-group no-margin form-group-default bg-master b-rad-lg p-r-0 p-l-0 p-b-10">
                                        <label class="muted fade fs-8 lh-10 p-b-10">Minutes</label>
                                        <input class="form-control text-center text-success font-orbitron fs-25" v-model.lazy="minutes" v-maska data-maska="##" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col p-r-5">
                            <div class="btn btn-sm btn-default btn-block b-rad-none" data-dismiss="modal">Cancel</div>
                        </div>
                        <div class="col p-l-5">
                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm">Update</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { vMaska } from 'maska/vue';
import { useFormHandler } from '@/composables/useFormHandler';
import route from '@/general/functions/router';

interface Props {
    section: string;
    data: any;
}

const props = defineProps<Props>();

const { parameters, submit, isLoading } = useFormHandler({
    section: props.section,
    data: props.data
});

const days = ref('00');
const hours = ref('00');
const minutes = ref('00');

const formatTime = (value: string | number) => {
    const normalized = Number.isNaN(Number(value)) ? 0 : Number(value);
    return `00${normalized}`.slice(-2);
};

const updateMinutes = () => {
    if (!parameters.value.detail) parameters.value.detail = { minutes: 0 };
    parameters.value.detail.minutes = (parseInt(days.value) * 1440) + (parseInt(hours.value) * 60) + parseInt(minutes.value);
};

watch(days, (value) => {
    days.value = formatTime(value);
    updateMinutes();
});

watch(hours, (value) => {
    let next = parseInt(value);
    if (next > 23) {
        next -= 24;
        days.value = String(parseInt(days.value) + 1);
    }
    hours.value = formatTime(next);
    updateMinutes();
});

watch(minutes, (value) => {
    let next = parseInt(value);
    if (next > 59) {
        next -= 60;
        hours.value = String(parseInt(hours.value) + 1);
    }
    minutes.value = formatTime(next);
    updateMinutes();
});

watch(
    () => props.data,
    (value) => {
        const totalMinutes = value?.detail?.minutes || 0;
        days.value = formatTime(Math.floor(totalMinutes / 1440));
        hours.value = formatTime(Math.floor(totalMinutes / 60) % 24);
        minutes.value = formatTime(Math.floor(totalMinutes % 60));
        updateMinutes();
    },
    { immediate: true }
);

const submitForm = () => {
    submit(route('api.segment.constant.update', props.data.segment_id), 'put', props.section, true, true, parameters.value);
};
</script>
