@cascade([
    "site",
    "page",
])

@props([
    "background_color" => null,
    "donate_widget" => null,
    "footer_widget" => false,
])
@php
    use function Statamic\View\Blade\value;

    $footer_widget ? ($background_color = "#FFFFFF") : $background_color;
    $text_color = (string) $background_color === "#004F59" ? "text-white" : "text-brand-black";
@endphp

<div class="max-lg:px-0! lg:flex lg:flex-row-reverse lg:justify-between lg:gap-12 lg:py-12">
    @isset($donate_widget)
        <s:collection:donate_widgets :id:is="$donate_widget->id">
            @if (! $footer_widget)
                <div class="relative flex items-end justify-end self-stretch lg:h-full lg:w-[60%]">
                    <img
                        src="{{ $image->url }}"
                        alt="{{ $image->alt }}"
                        class="h-full w-full object-cover object-center lg:rounded-lg"
                    />
                    @if (value($caption))
                        <s:partial:caption :align_right="true" :caption_text="$caption_text" />
                    @endif
                </div>
            @endif

            {{-- Initialise form options --}}
            <form
                @class(["flex shrink-0 flex-col items-start gap-4 rounded-lg p-4 lg:w-108 lg:p-6", "bg-white" => $footer_widget])
                x-cloak=""
                x-data="donateWidget({
                            currencySymbol: @js($site->attributes["currencySymbol"] ?? '$'),
                            currencyAfterValue: @js($site->attributes["currencyAfterValue"] === "true"),
                            includeFrequencyButtons: @js(value($include_monthly_amounts)),
                            onceAmounts: {
                                amount1: @js($once_amount_1),
                                amount1Description: @js(trim(htmlspecialchars_decode($once_amount_1_description)) ?? ""),
                                amount2: @js($once_amount_2),
                                amount2Description: @js(trim(htmlspecialchars_decode($once_amount_2_description)) ?? ""),
                                amount3: @js($once_amount_3),
                                amount3Description: @js(trim(htmlspecialchars_decode($once_amount_3_description)) ?? ""),
                            },
                            monthlyAmounts: {
                                amount1: @js($monthly_amount_1),
                                amount1Description: @js(trim(htmlspecialchars_decode($monthly_amount_1_description)) ?? ""),
                                amount2: @js($monthly_amount_2),
                                amount2Description: @js(trim(htmlspecialchars_decode($monthly_amount_2_description)) ?? ""),
                                amount3: @js($monthly_amount_3),
                                amount3Description: @js(trim(htmlspecialchars_decode($monthly_amount_3_description)) ?? ""),
                            },
                            otherText: @js(__("mwb.donations.other")),
                        })"
            >
                <div class="flex flex-col items-start gap-4 self-stretch">
                    <h1 class="h2 {{ $text_color }} hyphens-auto">
                        {{ $heading }}
                    </h1>
                    <span class="{{ $text_color }} text-copy lg:text-copy-lg">
                        {{ $description }}
                    </span>
                </div>
                {{-- Frequency selector buttons --}}
                <div class="flex flex-col items-start gap-2 self-stretch" x-show="includeFrequencyButtons">
                    <h4 class="{{ $text_color }}">
                        {{ __("mwb.donations.frequency") }}
                    </h4>
                    <span class="inline-flex self-stretch text-[1.1875rem]">
                        <x-donate_widget.timeframe_button
                            tabindex="0"
                            direction="left"
                            :background_color="$background_color"
                            x-bind:class="{'bg-brand-orange! text-white! border-transparent!': frequency === 'once' }"
                            @click="frequency = 'once'"
                        >
                            <span>{{ __("mwb.donations.one-off") }}</span>
                        </x-donate_widget.timeframe_button>
                        <x-donate_widget.timeframe_button
                            tabindex="0"
                            direction="right"
                            :background_color="$background_color"
                            x-bind:class="{'bg-brand-orange! text-white! border-transparent!': frequency === 'monthly' }"
                            @click="frequency = 'monthly'"
                        >
                            <span>{{ __("mwb.donations.monthly") }}</span>
                        </x-donate_widget.timeframe_button>
                    </span>
                </div>
                {{-- Amount selector buttons --}}
                <div class="flex flex-col items-start gap-2 self-stretch">
                    <h4 class="{{ $text_color }}">
                        {{ __("mwb.donations.amount") }}
                    </h4>
                    <div class="flex flex-col items-start gap-3 self-stretch">
                        {{-- Only show option buttons if there are any --}}
                        <template x-if="frequency === 'once' && hasOnceOptions">
                            <div class="flex w-full flex-wrap gap-3">
                                <template x-for="option in onceOptions" :key="option.key">
                                    <x-donate_widget.amount_button
                                        tabindex="0"
                                        :background_color="$background_color"
                                        x-bind:class="{'bg-brand-orange! text-white! border-transparent!': selectedOnceOption === option }"
                                        @click="selectedOnceOption = option"
                                    >
                                        <span
                                            x-text="option.key === 'other' ? option.value : formatValue(option.value)"
                                        ></span>
                                    </x-donate_widget.amount_button>
                                </template>
                            </div>
                        </template>
                        <template x-if="frequency === 'monthly' && hasMonthlyOptions">
                            <div class="flex w-full flex-wrap gap-3">
                                <template x-for="option in monthlyOptions" :key="option.key">
                                    <x-donate_widget.amount_button
                                        tabindex="0"
                                        :background_color="$background_color"
                                        x-bind:class="{'bg-brand-orange! text-white! border-transparent!': selectedMonthlyOption === option }"
                                        @click="selectedMonthlyOption = option"
                                    >
                                        <span
                                            x-text="option.key === 'other' ? option.value : formatValue(option.value)"
                                        ></span>
                                    </x-donate_widget.amount_button>
                                </template>
                            </div>
                        </template>
                        <div
                            x-show="! showDescriptionSpacer()"
                            class="flex min-h-15 flex-col justify-center self-stretch"
                        >
                            {{-- Description for selected preset option --}}
                            <div x-show="! isOtherSelected()" class="{{ $text_color }} flex self-stretch">
                                <span x-text="getAmount().description"></span>
                            </div>
                            {{-- Custom amount input field --}}
                            <label
                                class="flex self-stretch rounded-sm border-2 border-black/40 transition duration-150 ease-in-out focus-within:border-brand-teal focus-within:shadow-form-focus"
                                :class="currencyAfterValue ? 'flex-row-reverse' : 'flex-row'"
                                x-show="isOtherSelected()"
                            >
                                <div
                                    class="flex w-5 shrink-0 items-center justify-center bg-[#C4C4C4] px-3.5 text-brand-black sm:w-11"
                                    :class="currencyAfterValue ? 'rounded-r-xs' : 'rounded-l-xs'"
                                >
                                    <span x-text="currencySymbol"></span>
                                </div>
                                <x-form.input
                                    class="min-h-12 grow border-0! shadow-none!"
                                    type="number"
                                    inputmode="decimal"
                                    :placeholder="__('mwb.donations.custom_amount_placeholder')"
                                    x-bind:class="currencyAfterValue ? 'rounded-l-sm rounded-r-none!' : 'rounded-r-sm rounded-l-none!'"
                                    x-model="otherValue"
                                    min="0"
                                    x-on:wheel.prevent=""
                                />
                            </label>
                        </div>
                    </div>
                </div>
                {{-- Donate button --}}
                <a
                    tabindex="0"
                    type="submit"
                    class="btn-filled btn-orange self-stretch"
                    :href="getDonateUrl()"
                    target="_blank"
                >
                    {{ __("mwb.donations.donate") }}
                </a>
                <div class="h-14" x-show="isDesktop() && showDescriptionSpacer()">&nbsp;</div>
            </form>
        </s:collection:donate_widgets>
    @endisset
</div>
<script>
    function donateWidget(config) {
        return {
            currencySymbol: config.currencySymbol,
            currencyAfterValue: config.currencyAfterValue,
            includeFrequencyButtons: config.includeFrequencyButtons,
            frequency: 'once',
            otherValue: '',
            selectedOnceOption: null,
            selectedMonthlyOption: null,
            onceOptions: [],
            monthlyOptions: [],
            hasOnceOptions: false,
            hasMonthlyOptions: false,

            getAmount() {
                return this.frequency === 'once' ? this.selectedOnceOption : this.selectedMonthlyOption;
            },

            isOtherSelected() {
                const amount = this.getAmount();
                return !amount || amount.key === 'other';
            },

            showDescriptionSpacer() {
                if (!this.isOtherSelected()) {
                    if (this.getAmount().description === '') {
                        return true;
                    }
                }
                return false;
            },

            formatValue(value) {
                const num = Number(value);
                const isWhole = num % 1 === 0;
                const formattedValue = isWhole ? num : num.toFixed(2);

                return this.currencyAfterValue
                    ? `${formattedValue}${this.currencySymbol}`
                    : `${this.currencySymbol}${formattedValue}`;
            },

            initOptions() {
                // always build up once options, only add monthly if required
                this.onceOptions = this._buildOptionsArray([
                    { value: config.onceAmounts.amount1, description: config.onceAmounts.amount1Description },
                    { value: config.onceAmounts.amount2, description: config.onceAmounts.amount2Description },
                    { value: config.onceAmounts.amount3, description: config.onceAmounts.amount3Description },
                ]);
                this.onceOptions.push({ key: 'other', value: config.otherText });
                this.hasOnceOptions = this.onceOptions.length > 1;

                if (this.includeFrequencyButtons) {
                    this.monthlyOptions = this._buildOptionsArray([
                        { value: config.monthlyAmounts.amount1, description: config.monthlyAmounts.amount1Description },
                        { value: config.monthlyAmounts.amount2, description: config.monthlyAmounts.amount2Description },
                        { value: config.monthlyAmounts.amount3, description: config.monthlyAmounts.amount3Description },
                    ]);
                    this.monthlyOptions.push({ key: 'other', value: config.otherText });
                }
                this.hasMonthlyOptions = this.monthlyOptions.length > 1;

                // default selections
                this.selectedOnceOption = this.onceOptions.length > 0 ? this.onceOptions[0] : null;
                this.selectedMonthlyOption = this.monthlyOptions.length > 0 ? this.monthlyOptions[0] : null;
            },

            // build options arrays
            _buildOptionsArray(items) {
                const options = [];
                items.forEach((item, index) => {
                    if (item.value) {
                        options.push({
                            key: index + 1,
                            value: item.value,
                            description: item.description,
                        });
                    }
                });
                return options;
            },

            init() {
                this.initOptions();
            },

            getDonateUrl() {
                const urlAmount = this.isOtherSelected() ? this.otherValue : this.getAmount().value;
                return @js($donate_link) + '&f=' + this.frequency + '&amount=' + Number(urlAmount || 0).toFixed(2);
            },
        };
    }
</script>