import $ from 'jquery';
import {opt, laddaStart, scrollTo} from './shared.js';
import stepExtras from './extras_step.js';
import stepTime from './time_step.js';
import stepCart from './cart_step.js';
import Chain from './components/Chain.svelte';

/**
 * Service step.
 */
export default function stepService(params) {
    if (opt[params.form_id].skip_steps.service) {
        if (!opt[params.form_id].skip_steps.extras && opt[params.form_id].step_extras == 'before_step_time') {
            stepExtras(params)
        } else {
            stepTime(params);
        }
        return;
    }
    var data = {
            action    : 'bookly_render_service',
            csrf_token: BooklyL10n.csrf_token,
        },
        $container = opt[params.form_id].$container;
    if (opt[params.form_id].use_client_time_zone) {
        data.time_zone        = opt[params.form_id].timeZone;
        data.time_zone_offset = opt[params.form_id].timeZoneOffset;
    }
    $.extend(data, params);
    $.ajax({
        url         : BooklyL10n.ajaxurl,
        data        : data,
        dataType    : 'json',
        xhrFields   : { withCredentials: true },
        crossDomain : 'withCredentials' in new XMLHttpRequest(),
        success     : function (response) {
            if (response.success) {
                BooklyL10n.csrf_token = response.csrf_token;
                $container.html(response.html);
                if (params === undefined) { // Scroll when returning to the step Service. default value {new_chain : true}
                    scrollTo($container);
                }

                var $chain                  = $('.bookly-js-chain', $container),
                    $date_from              = $('.bookly-js-date-from', $container),
                    $week_day               = $('.bookly-js-week-day', $container),
                    $select_time_from       = $('.bookly-js-select-time-from', $container),
                    $select_time_to         = $('.bookly-js-select-time-to', $container),
                    $next_step              = $('.bookly-js-next-step', $container),
                    $mobile_next_step       = $('.bookly-js-mobile-next-step', $container),
                    $mobile_prev_step       = $('.bookly-js-mobile-prev-step', $container),
                    locations               = response.locations,
                    categories              = response.categories,
                    services                = response.services,
                    staff                   = response.staff,
                    chain                   = response.chain,
                    required                = response.required,
                    defaults                = opt[params.form_id].defaults,
                    servicesPerLocation     = response.services_per_location,
                    serviceNameWithDuration = response.service_name_with_duration,
                    showRatings             = response.show_ratings,
                    maxQuantity             = response.max_quantity || 1,
                    multiple                = response.multi_service || false,
                    l10n                    = response.l10n
                ;

                // Set up selects.
                if (serviceNameWithDuration) {
                    $.each(services, function(id, service) {
                        service.name = service.name + ' ( ' + service.duration + ' )';
                    });
                }

                let c = new Chain({
                    target: $chain.get(0),
                    props: {
                        items: chain,
                        data: {
                            locations,
                            categories,
                            services,
                            staff,
                            defaults,
                            required,
                            servicesPerLocation,
                            showRatings,
                            maxQuantity,
                            hasLocationSelect: !opt[params.form_id].form_attributes.hide_locations,
                            hasCategorySelect: !opt[params.form_id].form_attributes.hide_categories,
                            hasServiceSelect: !(opt[params.form_id].form_attributes.hide_services && defaults.service_id),
                            hasStaffSelect: !opt[params.form_id].form_attributes.hide_staff_members,
                            hasDurationSelect: !opt[params.form_id].form_attributes.hide_service_duration,
                            hasNopSelect: opt[params.form_id].form_attributes.show_number_of_persons,
                            hasQuantitySelect: !opt[params.form_id].form_attributes.hide_quantity,
                            l10n
                        },
                        multiple
                    }
                });

                // Init Pickadate.
                $date_from.pickadate({
                    formatSubmit    : 'yyyy-mm-dd',
                    format          : opt[params.form_id].date_format,
                    min             : response.date_min || true,
                    max             : response.date_max || true,
                    clear           : false,
                    close           : false,
                    today           : BooklyL10n.today,
                    monthsFull      : BooklyL10n.months,
                    weekdaysFull    : BooklyL10n.days,
                    weekdaysShort   : BooklyL10n.daysShort,
                    labelMonthNext  : BooklyL10n.nextMonth,
                    labelMonthPrev  : BooklyL10n.prevMonth,
                    firstDay        : opt[params.form_id].firstDay,
                    onSet           : function(timestamp) {
                        if ($.isNumeric(timestamp.select)) {
                            // Checks appropriate day of the week
                            var date = new Date(timestamp.select);
                            $('.bookly-js-week-day[value="' + (date.getDay() + 1) + '"]:not(:checked)', $container).attr('checked', true).trigger('change');
                        }
                    }
                });

                $('.bookly-js-go-to-cart', $container).on('click', function (e) {
                    e.preventDefault();
                    laddaStart(this);
                    stepCart({form_id: params.form_id,from_step : 'service'});
                });

                if (opt[params.form_id].form_attributes.hide_date) {
                    $('.bookly-js-available-date', $container).hide();
                }
                if (opt[params.form_id].form_attributes.hide_week_days) {
                    $('.bookly-js-week-days', $container).hide();
                }
                if (opt[params.form_id].form_attributes.hide_time_range) {
                    $('.bookly-js-time-range', $container).hide();
                }

                // change week days
                $week_day.on('change', function () {
                    var $this = $(this);
                    if ($this.is(':checked')) {
                        $this.parent().not("[class*='active']").addClass('active');
                    } else {
                        $this.parent().removeClass('active');
                    }
                });

                // time from
                $select_time_from.on('change', function () {
                    var start_time       = $(this).val(),
                        end_time         = $select_time_to.val(),
                        $last_time_entry = $('option:last', $select_time_from);

                    $select_time_to.empty();

                    // case when we click on the not last time entry
                    if ($select_time_from[0].selectedIndex < $last_time_entry.index()) {
                        // clone and append all next "time_from" time entries to "time_to" list
                        $('option', this).each(function () {
                            if ($(this).val() > start_time) {
                                $select_time_to.append($(this).clone());
                            }
                        });
                        // case when we click on the last time entry
                    } else {
                        $select_time_to.append($last_time_entry.clone()).val($last_time_entry.val());
                    }

                    var first_value = $('option:first', $select_time_to).val();
                    $select_time_to.val(end_time >= first_value ? end_time : first_value);
                });

                let stepServiceValidator = function() {
                    let valid      = true,
                        $scroll_to = null;

                    $(c.validate()).each(function (_, status) {
                        if (!status.valid) {
                            valid = false;
                            let $el = $(status.el);
                            if ($el.is(':visible')) {
                                $scroll_to = $el;
                                return false;
                            }
                        }
                    });

                    $date_from.removeClass('bookly-error');
                    // date validation
                    if (!$date_from.val()) {
                        valid = false;
                        $date_from.addClass('bookly-error');
                        if ($scroll_to === null) {
                            $scroll_to = $date_from;
                        }
                    }

                    // week days
                    if (!$('.bookly-js-week-day:checked', $container).length) {
                        valid = false;
                        if ($scroll_to === null) {
                            $scroll_to = $week_day;
                        }
                    }

                    if ($scroll_to !== null) {
                        scrollTo($scroll_to);
                    }

                    return valid;
                };

                // "Next" click
                $next_step.on('click', function (e) {
                    e.preventDefault();

                    if (stepServiceValidator()) {

                        laddaStart(this);

                        // Prepare chain data.
                        let chain = [],
                            has_extras = 0,
                            time_requirements = 0,
                            _time_requirements = {'required': 2, 'optional': 1, 'off': 0};
                        $.each(c.getValues(), function (_, values) {
                            let _service = services[values.serviceId];

                            chain.push({
                                location_id: values.locationId,
                                service_id: values.serviceId,
                                staff_ids: values.staffIds,
                                units: values.duration,
                                number_of_persons: values.nop,
                                quantity: values.quantity
                            });
                            time_requirements = Math.max(
                                time_requirements,
                                _time_requirements[_service.hasOwnProperty('time_requirements')
                                    ? _service.time_requirements
                                    : 'required']
                            );
                            has_extras += _service.has_extras;
                        });

                        // Prepare days.
                        var days = [];
                        $('.bookly-js-week-days .active input.bookly-js-week-day', $container).each(function() {
                            days.push(this.value);
                        });
                        $.ajax({
                            type : 'POST',
                            url  : BooklyL10n.ajaxurl,
                            data : {
                                action     : 'bookly_session_save',
                                csrf_token : BooklyL10n.csrf_token,
                                form_id    : params.form_id,
                                chain      : chain,
                                date_from  : $date_from.pickadate('picker').get('select', 'yyyy-mm-dd'),
                                days       : days,
                                time_from  : $select_time_from.val(),
                                time_to    : $select_time_to.val(),
                                no_extras  : has_extras == 0
                            },
                            dataType    : 'json',
                            xhrFields   : { withCredentials: true },
                            crossDomain : 'withCredentials' in new XMLHttpRequest(),
                            success     : function (response) {
                                opt[params.form_id].no_time = time_requirements == 0;
                                opt[params.form_id].no_extras = has_extras == 0;
                                if (opt[params.form_id].skip_steps.extras) {
                                    stepTime({form_id: params.form_id});
                                } else {
                                    if (has_extras == 0 || opt[params.form_id].step_extras == 'after_step_time') {
                                        stepTime({form_id: params.form_id});
                                    } else {
                                        stepExtras({form_id: params.form_id});
                                    }
                                }
                            }
                        });
                    }
                });

                $mobile_next_step.on('click', function (e,skip_scroll) {
                    if (stepServiceValidator()) {
                        if (opt[params.form_id].skip_steps.service_part2) {
                            laddaStart(this);
                            $next_step.trigger('click');
                        } else {
                            $('.bookly-js-mobile-step-1', $container).hide();
                            $('.bookly-js-mobile-step-2', $container).css('display', 'block');
                            if (skip_scroll != true) {
                                scrollTo($container);
                            }
                        }
                    }

                    return false;
                });

                if (opt[params.form_id].skip_steps.service_part1) {
                    // Skip scrolling
                    $mobile_next_step.trigger('click', [true]);
                    $mobile_prev_step.remove();
                } else {
                    $mobile_prev_step.on('click', function () {
                        $('.bookly-js-mobile-step-1', $container).show();
                        $('.bookly-js-mobile-step-2', $container).hide();
                        return false;
                    });
                }
            }
        }
    });
}