import React, {useEffect, useState} from 'react';
import {__, _nonce, _solea_get_local_groups} from '../../../../assets/javascripts/library.js';
import ReactDOM from "react-dom/client";
import {ToasterProvider, useToaster} from "../../global-components/toaster.jsx";
import Modal from "../../global-components/modal.jsx";
import ParticipationFees from "./participation-fees.jsx";
import EventManagement from "./event-management.jsx";

function Settings({result, toast_message = ''}) {
    console.log(result.event.contributing_groups);

    const { showToast } = useToaster();

    useEffect(() => {
        if (toast_message) {
            showToast(toast_message, 'success');
        }
    }, [toast_message]);

    const [noLocalGroupsDisplay, setNoLocalGroupsDisplay] = useState(false);
    const [formData, setFormData] = useState({
        id: result.event.id || 0,
        event_name: result.event.event_name || '',
        event_location: result.event.event_location || '',
        event_postalcode: result.event.event_postalcode || '',
        event_email: result.event.event_email || '',
        last_minute_begin: result.event.last_minute_begin || '',
        last_minute_end: result.event.last_minute_end,
        event_url: result.event.event_url || '',
        signup_allowed: result.event.signup_allowed || false,
        weekly_report: result.event.weekly_report || false,
        enable_all_eating: result.event.enable_all_eating || false,
        guests_allowed: result.event.guests_allowed || false,
        contributing_groups: result.event.contributing_groups || '',
        age_alcoholics: result.event.age_alcoholics || '16',
    });

    const handleCheckboxChange = (e) => {
        setFormData(prev => ({
            ...prev,
            [e.target.name]: e.target.checked,
        }));
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value,
        }));
    };

    const openPayment = () => {
        const response = fetch("/wp-json/solea/event-details/print-page/payment-fees", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                event_id: result.event.id,
                solea_nonce: _nonce(),
            }),
        })
            .then((res) => res.json())
            .then((data) => {

                    var container = document.getElementById('solea_event_group_contents');
                    var root = ReactDOM.createRoot(container);
                    root.render(
                        <ToasterProvider>
                            <ParticipationFees event={data.event} />
                        </ToasterProvider>
                    );
                }
            );
    }

    const openEventManagement = () => {
        const response = fetch("/wp-json/solea/event-details/print-page/event-management", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                event_id: result.event.id,
                solea_nonce: _nonce(),
            }),
        })
            .then((res) => res.json())
            .then((data) => {

                    var container = document.getElementById('solea_event_group_contents');
                    var root = ReactDOM.createRoot(container);
                    root.render(
                        <ToasterProvider>
                            <EventManagement event={data.event} all_users={data.users} />
                        </ToasterProvider>
                    );
                }
            );
    }

    const handleSubmit = () => {
        const checkedGroups = Array.from(document.querySelectorAll('input[name="local_groups"]:checked'))
            .map(input => parseInt(input.value));

        const payload = {
            ...formData,
            contributing_groups: checkedGroups.join(',') // wieder als kommaseparierter String
        };

        if ('' === payload.contributing_groups || '0' === payload.contributing_groups) {
            setNoLocalGroupsDisplay(true);
            return;
        }

        const response = fetch("/wp-json/solea/event-details/print-page/edit-settings/save-common", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                payload,
                solea_nonce: _nonce(),
            }),
        })
            .then((res) => res.json())
            .then((data) => {
                showToast(__('The settings were saved.', 'solea'));
            });
    };
    return (
        <div class="solea-page">
            <h3>
                {__('Event settings', 'solea')}
            </h3>
            <div className="solea_event_settings_parent">
                <div className="solea_event_settings_common">
                    <table>
                        <tr>
                            <td>
                                {__('Event name')}:
                            </td>
                            <td>
                                <input
                                    type="text"
                                    defaultValue={result.event.event_name}
                                    name="event_name"
                                    onChange={handleChange}
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                {__('Event location')}:
                            </td>
                            <td>
                                <input
                                    type="text"
                                    defaultValue={result.event.event_location}
                                    name="event_location"
                                    onChange={handleChange}
                                />
                            </td>
                        </tr>

                        <tr>
                            <td>
                                {__('Postal code')}:
                            </td>
                            <td>
                                <input
                                    type="text"
                                    defaultValue={result.event.event_postalcode}
                                    name="event_postalcode"
                                    onChange={handleChange}
                                />
                            </td>
                        </tr>

                            <tr>
                            <td>
                                {__('Email of event management', 'solea')}:
                            </td>
                            <td>
                                <input
                                    type="email"
                                    defaultValue={result.event.event_email}
                                    name="event_email"
                                    onChange={handleChange}

                                />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                {__('Registration until', 'solea')}:
                            </td>
                            <td>
                                <input
                                    type="date"
                                    defaultValue={result.event.last_minute_begin}
                                    name="last_minute_begin"
                                    onChange={handleChange}
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                {__('Late registration until', 'solea')}:
                            </td>
                            <td>
                                <input
                                    type="date"
                                    defaultValue={result.event.last_minute_end}
                                    name="registration_end"
                                    onChange={handleChange}

                                />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                {__('Minimum age for alcoholics', 'solea')}:
                            </td>
                            <td>
                                <input
                                    type="number"
                                    defaultValue={result.event.age_alcoholics}
                                    name="age_alcoholics"
                                    onChange={handleChange}
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>{__('Registration URL', 'solea')}:</td>
                            <td>
                                <input
                                    type="text"
                                    defaultValue={result.event.event_url}
                                    name="event_url"
                                    onChange={handleChange}

                                />
                            </td>
                        </tr>
                        <tr>
                            <td colSpan="2">
                                <ul>
                                    <li>
                                        <input
                                            type="checkbox"
                                            name="signup_allowed"
                                            id="settings_signup_allowed"
                                            defaultChecked={result.event.signup_allowed}
                                            onChange={handleCheckboxChange}

                                        />
                                        <label htmlFor="settings_signup_allowed">
                                            {__('Open for registration', 'solea')}
                                        </label>
                                    </li>
                                    <li>
                                        <input
                                            type="checkbox"
                                            name="weekly_report"
                                            id="settings_send_weekly_report"
                                            defaultChecked={result.event.weekly_report}
                                            onChange={handleCheckboxChange}


                                        />
                                        <label htmlFor="settings_send_weekly_report">
                                            {__('Send weekly reports', 'solea')}
                                        </label>
                                    </li>
                                    <li>
                                        <input
                                            type="checkbox"
                                            name="enable_all_eating"
                                            id="settings_meat_allowed"
                                            defaultChecked={result.event.enable_all_eating}
                                            onChange={handleCheckboxChange}

                                        />
                                        <label htmlFor="settings_meat_allowed">
                                            {__('Meat is allowed', 'solea')}
                                        </label>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>
                <div className="solea_event_settings_local_groups">
                    <h4>{__('Contributing local groups', 'solea')}</h4>
                    <ul>
                    <li>
                            <input
                                type="checkbox"
                                name="local_groups"
                                value="0"
                                id="local_group_0"
                                defaultChecked={result.event.guests_allowed}
                            />
                            <label for="local_group_0">{__( 'Guests are allowed', 'solea' )}</label>
                        </li>

                        {_solea_get_local_groups().map((group) => (
                            <li>
                                <input
                                    type="checkbox"
                                    name="local_groups"
                                    value={group.id}
                                    id={"local_group_" + group.id}
                                    defaultChecked={
                                        result.event.contributing_groups
                                            ?.split(',')
                                            .map((id) => parseInt(id.trim()))
                                            .includes(group.id)
                                    }
                                    //onChange={handleCheckboxChange}
                                />
                                <label for={"local_group_" + group.id}>
                                    {group.name}
                                </label>
                            </li>
                        ))}


                    </ul>
                </div>
            </div>

            <p>
                <button className="button solea-button" onClick={handleSubmit}>{__('Save', 'solea')}</button>
                <button className="button solea-button" onClick={openPayment}>{__('Participation fees', 'solea')}</button>
                <button className="button solea-button" onClick={openEventManagement}>{__('Event management', 'solea')}</button>
            </p>

            <Modal title={__('No local groups selected', 'solea')} isOpen={noLocalGroupsDisplay} onClose={() => setNoLocalGroupsDisplay(false)}>
                <p>
                    {__('Please select at least one local group or enable participation for guestes.', 'solea')}
                </p>
            </Modal>
        </div>
    )
}

export default Settings;