jQuery(document).ready(function ($) {

    const category = $('#timetics-filter-category');
    const staff = $('#timetics-filter-staff');
    const url = timetics.site_url + '/wp-json/timetics/v1/appointments/filter';
    const meetinContainer = $('.tt-meeting-list-wrapper');

    $(category).on('change', function (e) {
        e.preventDefault();

        $.ajax({
            url: url,
            method: 'GET',
            data: {
                category: $(this).val()
            },
            success: function (res) {
                if (Array.isArray(res.data.items)) {
                    const meetings_markup = prepare_items(res.data.items);
                    meetinContainer.html(meetings_markup);
                }
            }
        });
    });

    $(staff).on('change', function (e) {
        e.preventDefault();

        $.ajax({
            url: url,
            method: 'GET',
            data: {
                staff_id: $(this).val()
            },
            success: function (res) {
                if (Array.isArray(res.data.items)) {
                    const meetings_markup = prepare_items(res.data.items);
                    meetinContainer.html(meetings_markup);
                }
            }
        });
    });

    /**
     * Prepare meeting itesm
     *
     * @return  string
     */
    function prepare_items(items) {
        if ( items.length < 1 ) {
            return `<p>No meetings found</p>`;
        }

        const meetings = items.map(item => {
            const staffs = preapare_staff(item.staff);
            return `
            <div class="ant-col-8 ant-col-xs-24 ant-col-md-8">
                <div class="tt-meeting-list-item">
                    <!-- Staff -->
                        ${staffs}
                    <h3 class="tt-title">
                        ${item.name}
                    </h3>
                    <!-- meeting description -->
                    <p>Meeting description</p>

                    <!-- meeting info -->
                    <ul class="meeting-info-list">
                        <!-- meeting duration -->
                        <li>
                        <svg fill="#3263F8" width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <path d="M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
                        </svg>
                            ${item.duration}
                        </li>
                        <!-- meeting price -->
                    </ul>
                    <button class="ant-btn ant-btn-primary ant-btn-block" data-id="${item.id}">
                        Book Appointment
                    </button>
                    <div class="timetics-booking-modal"></div>
                </div>
            </div>`;
        }).join('');

        return meetings;
    }

    function preapare_staff(staffs) {
        const totalStaff = staffs.length;
        let markup = '';

        if ( totalStaff > 2 ) {
            markup = `<ul class="tt-author tt-author-avatar-list">
                ${staffs.map(staff => {
                    return `
                    <li class="tt-single-host">
                        <img src="${staff.image}" alt="${staff.full_name}" />
                        <div class="tt-tooltip-text">${staff.full_name}</div>
                    </li>
                    `
                }).join('')
            }
            </ul>`;
        } else {
            markup = `<ul class="tt-author">
                ${staffs.map(staff => {
                    return `
                        <li>
                            <img src="${staff.image}" alt="${staff.full_name}" />
                            <span>${staff.full_name}</span>
                        </li>`;
                    }).join('')
                }
            </ul>`;
        }

        return markup;
    }
});