import Validate from "./Validation";
import {handle} from "./handle";
import customSelect from 'custom-select';
import 'custom-select/build/custom-select.css';
import {createEvent} from "../events";
import intlTelInput from "intl-tel-input";
import 'intl-tel-input/build/css/intlTelInput.css';

const url = new URL(window.location);

const Forms = (form, name) => {
    if (!form) return;

    const stateForm = {
        actionUrl: 'https://group.quadcode.com/api/wl/cfdBroker',
        data: {
            referrer: '/lp/white-label-cfd-broker',
        },
        error: false,
    }

    let select;

    if (!window.matchMedia("(max-width: 1023px)").matches) {
        if (name === 'popup') {
            select = customSelect(document.getElementById('range-popup'));
        } else {
            select = customSelect(document.getElementById('range'));
        }
    }

    let itl;

    if (name === 'popup') {
        const phonePopup = document.getElementById('phone-popup');

        if (!phonePopup) {
            return;
        }

        itl = intlTelInput(phonePopup, {
            initialCountry: 'auto',
            geoIpLookup: function(callback) {
                fetch("https://ipapi.co/json")
                    .then(function(res) { return res.json(); })
                    .then(function(data) { callback(data.country_code); })
                    .catch(function() { callback("us"); });
            },
            hiddenInput: "full_number",
            nationalMode: false,
            autoInsertDialCode: true,
            formatOnDisplay: true,
            autoHideDialCode: true,
            separateDialCode: true,
            autoPlaceholder: false,
            preferredCountries: ['gb', 'us', 'de', 'es', 'fr', 'it', 'pt', 'zh'],
            utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js',
        });

        phonePopup.addEventListener("input", function () {
            stateForm.data['full_number-popup'] = itl.getNumber();
        });

        phonePopup.addEventListener('focus', (e) => {
            if (e.target.parentElement.parentElement) {
                e.target.parentElement.parentElement.classList.add('focus');
            }
        });

        phonePopup.addEventListener('blur', (e) => {
            if (e.target.parentElement.parentElement && !phonePopup.value) {
                e.target.parentElement.parentElement.classList.remove('focus');
            }
        });
    } else {
        const phone = document.getElementById('phone');

        if (!phone) {
            return;
        }

        itl = intlTelInput(phone, {
            initialCountry: 'auto',
            geoIpLookup: function(callback) {
                fetch("https://ipapi.co/json")
                    .then(function(res) { return res.json(); })
                    .then(function(data) { callback(data.country_code); })
                    .catch(function() { callback("us"); });
            },
            hiddenInput: "full_number",
            nationalMode: false,
            autoInsertDialCode: true,
            formatOnDisplay: true,
            autoHideDialCode: true,
            separateDialCode: true,
            autoPlaceholder: false,
            preferredCountries: ['gb', 'us', 'de', 'es', 'fr', 'it', 'pt', 'zh'],
            utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js',
        });

        phone.addEventListener("input", function () {
            stateForm.data['full_number'] = itl.getNumber();
        });

        phone.addEventListener('focus', (e) => {
            if (e.target.parentElement.parentElement) {
                e.target.parentElement.parentElement.classList.add('focus');
            }
        });

        phone.addEventListener('blur', (e) => {
            if (e.target.parentElement.parentElement && !phone.value) {
                e.target.parentElement.parentElement.classList.remove('focus');
            }
        });
    }

    let hash = localStorage.getItem('form__lang');
    const arrayInput = form.querySelectorAll('input, select');

    const submit = form.querySelector('[data-action="submit"]');
    const success = form.querySelector('[data-action="form-success"]');
    const successBtn = form.querySelector('[data-action="form-success-button"]');
    const error = form.querySelector('[data-action="form-error"]');
    const errorBtn = form.querySelector('[data-action="form-error-button"]');
    const content = form.querySelector('[data-action="form-content"]');

    select?.[0]?.select?.addEventListener('change', (e) => {

        if (name === 'popup') {
            stateForm.data['range-popup'] = e.target.value;
        } else {
            stateForm.data['range'] = e.target.value;
        }

        e.target.parentElement.parentElement.classList.add('focus');
        e.target.parentElement.parentElement.classList.remove('error');
        e.target.parentElement.parentElement.parentElement.getElementsByClassName('formFieldItemError')[0].remove();
    });

    arrayInput.forEach((item) => {
        if (item) {
            item.addEventListener('input', (e) => {
                stateForm.error = Validate(item, item.id);
                stateForm.data[item.id] = item.value;

                if (e.target.parentElement && item.value) {
                    e.target.parentElement.classList.add('focus');
                }
            });

            item.addEventListener('focus', (e) => {
                if (e.target.parentElement) {
                    e.target.parentElement.classList.add('focus');
                }
            });

            item.addEventListener('blur', (e) => {
                if (e.target.parentElement && !item.value) {
                    e.target.parentElement.classList.remove('focus');
                }
            });
        }
    });

    submit.addEventListener('click', async (e) => {
        e.preventDefault();

        hash = localStorage.getItem('form__lang');

        stateForm.error = Validate(arrayInput);

        stateForm.data['landing_url'] = url.host + url.pathname;

        for (let i = 0; i < localStorage.length; i++) {
            let key = localStorage.key(i);
            if (key.includes('form__')) {
                stateForm.data[key.replace('form__', '')] = localStorage.getItem(key);
            }
        }

        if (name === 'popup') {
            Object.keys(stateForm.data).forEach((item) => {
                let value = stateForm.data[item];

                delete stateForm.data[item];

                stateForm.data[item.replace('-popup', '')] = value;
            })
        }

        if (stateForm.data['phone']) {
            stateForm.data['phone'] = stateForm.data['full_number'];
        }

        if (stateForm.data['full_number']) {
            delete stateForm.data['full_number'];
        }

        if (!stateForm.error) {
            submit.classList.add('loading');

            await fetch(stateForm.actionUrl,
                {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify(stateForm.data)
                }
            )
                .then((response) => response.json())
                .then((data) => {
                    if (data.errors) {
                        handle(data.errors)
                        return;
                    }

                    if (data.success) {
                        createEvent({event:'saas_form_sent'});
                        content.style.display = 'none';
                        success.style.display = 'flex';
                    }
                }).catch(() => {
                    content.style.display = 'none';
                    error.style.display = 'flex';
                }).finally(() => {
                    submit.classList.remove('loading');
                });
        }
    });

    successBtn.addEventListener('click', () => {
        arrayInput.forEach((item) => {
            if (item.type === 'checkbox') {
                item.checked = false;
            } else {
                item.value = '';
            }

            const label = document.querySelector(`[for="${item.id}"]`);

            if (label) {
                label.classList.remove('focus');
                label.classList.remove('error');
            }
        });

        content.style.display = 'block';
        success.style.display = 'none';
    });

    errorBtn.addEventListener('click', () => {
        arrayInput.forEach((item) => {
            if (item.type === 'checkbox') {
                item.checked = false;
            } else {
                item.value = '';
            }

            const label = document.querySelector(`[for="${item.id}"]`);

            if (label) {
                label.classList.remove('focus');
                label.classList.remove('error');
            }
        });

        content.style.display = 'block';
        error.style.display = 'none';
    });
}

export default Forms;