<template>
    <div class="cattle-breeding-date">
        <form ref="form" class="calculator-form" style="opacity: 0;">
            <legend>Cattle Breeding Date</legend>
            <fieldset ref="inputs" class="inputs">
                <label>Desired Calving Date
                    <input ref="calvingDate" type="date" name="calvingDate" value="" required />
                </label>
                <label>Gestation Period
                    <select ref="gestationPeriod" name="gestationPeriod"></select>
                </label>
            </fieldset>
            <fieldset ref="results" class="results" hidden></fieldset>
            <fieldset ref="slot" class="slotted">
                <slot></slot>
            </fieldset>
            <fieldset class="actions">
                <input class="btn" type="submit" name="submit" value="Calculate" ref="finish" />
                <input class="btn" type="button" name="restart" value="Start Over" ref="start" hidden />
            </fieldset>
        </form>
    </div>
</template>
<style></style>
<script>
const gestationPeriods = [279, 280, 281, 282, 283, 284, 285, 286, 287];

export default {
    name: 'cattle-breeding-date',
    stylesheet: 'styles/forms.css',
    connectedCallback ({refs, forms, emit}) {
        refs.calvingDate.value = new Date().toDateInputValue();
        var gestationProp = parseInt(this.getAttribute('gestationPeriod') || '283');

        var formId = this.getAttribute('id') || '';

        gestationPeriods.forEach(num => {
            const option = document.createElement('option');
            option.value = num;
            option.textContent = `${num} days`;
            if (num === gestationProp) {
                option.selected = true;
            }
            refs.gestationPeriod.appendChild(option);
        });

        refs.start.addEventListener('click', event => {
            event.preventDefault();
            refs.results.setAttribute('hidden', true);
            refs.inputs.removeAttribute('hidden');
            refs.finish.removeAttribute('hidden');
            refs.start.setAttribute('hidden', true);
        });

        refs.finish.addEventListener('click', event => {
            event.preventDefault();
            var data = { id: formId,  form: 'cattle-breeding-date', ...forms.toObject(refs.form)}
            if (!data.calvingDate || !data.gestationPeriod) {
                alert('Please fill in all the fields!');
                return;
            }
            var breedingDate = new Date(data.calvingDate).addDays(-parseInt(data.gestationPeriod));

            data = {
                id: formId,
                form: 'cattle-breeding-date',
                calvingDate: data.calvingDate,
                gestationPeriod: parseInt(data.gestationPeriod),
                breedingDate: breedingDate,
                firstTrimesterBegins: breedingDate,
                secondTrimesterBegins: breedingDate.addDays(94),
                thirdTrimesterBegins: breedingDate.addDays(188)
            }
            var options = {year: "numeric", month: "long", day: "numeric"};
            refs.results.removeAttribute('hidden');
            refs.results.innerHTML = `
                <h2>Breeding Date 🠂 ${data.breedingDate.toLocaleDateString('en-US', options)}</h2>
                <p class="info">Your cow or heifer should be bred on this date to calve on or around ${data.calvingDate.toLocaleDateString('en-US', options)}.</p>
                ${forms.renderResults({
                    'Calving Date': data.calvingDate.toLocaleDateString('en-US', options),
                    'Gestation Period': data.gestationPeriod,
                    'Second Trimester Begins': data.secondTrimesterBegins.toLocaleDateString('en-US', options),
                    'Third Trimester Begins': data.thirdTrimesterBegins.toLocaleDateString('en-US', options)
                })}
            `;

            refs.inputs.setAttribute('hidden', true);
            refs.finish.setAttribute('hidden', true);
            refs.start.removeAttribute('hidden');

            emit('forms:cattle-breeding-date', { detail: data, bubbles: true });
        });

        setTimeout(function () {
            refs.form.style.opacity = 1;
        }, 500);
    }
}
</script>