import useCart from "../services/useCart";
import {appendTranslations} from "../services/useTranslations";
import flatpickr from "flatpickr";
import {computed, createApp, onMounted, ref} from "vue";
import { format } from 'date-fns'
import FlashMessage from "./FlashMessage";
import debounce from "lodash/debounce";
import PlanModal from "./PlanModal";

export default class ShoppingCart {

    constructor(el) {

        this.el = el;

        const {cart, updateProduct, removeProduct, loadCart, updateMeta, cartErrors, showForceCartUpdate} = useCart()
        cart.value = JSON.parse(el.dataset.cart)
        delete el.dataset.cart

        // If no items break
        if(!cart.value.items) return

        const cartDate = new Date(cart.value.date.year, (cart.value.date.month - 1), cart.value.date.day)
        const date = ref(format(cartDate, 'dd-MM-yyyy'))
        const location = ref(cart.value.location.id)

        const allAddons = ref(JSON.parse(el.dataset.addons))
        delete el.dataset.addons

        const editId = ref(null)

        appendTranslations(JSON.parse(el.dataset.translations))
        delete el.dataset.translations

        createApp({
            components: {FlashMessage, PlanModal},
            setup() {

                const isLoading = ref(false)
                const showAddons = ref(false)
                const datepicker = ref(null)

                const modalProduct = ref(null)


                if(document.body.clientWidth > 800) showAddons.value = true

                onMounted(() => {
                    flatpickr(datepicker.value, {
                        minDate: new Date().fp_incr(10),
                        defaultDate: cartDate
                    })
                })

                const dateOrLocationChanged = computed(() => {

                    if(format(cartDate, 'dd-MM-yyyy') != date.value) return true
                    if(!cart.value.location) return true
                    if(location.value != cart.value.location.id) return true

                    return false
                })

                const selectedProductIds = computed(() => {
                    return cart.value.items.map(item => item.product.id)
                })

                const addons = computed(() => {
                    return allAddons.value.filter(addon => {
                        return !selectedProductIds.value.includes(addon.id) && addon.locations.includes(location.value)
                    })
                })

                const reloadCart = () => {
                    if(document.body.clientWidth < 980) window.scrollTo(0, 0);
                    return loadCart().then(() => {
                        modalProduct.value = null
                    })
                }

                const update = debounce(async (event, product) => {

                    isLoading.value = true

                    await updateProduct(product.product.id, {
                        time: product.selectedTimeslot?.timeSlotValue,
                        amount: product.amountOfPersons,
                        notification: product.notification,
                    })

                    if(cartErrors.value.length === 0) await loadCart().then(() => {
                        editId.value = null
                    })

                    isLoading.value = false

                }, 600);

                const updateCartMeta = async (forceUpdate = false) => {

                    isLoading.value = true

                    await updateMeta({
                        location_id: location.value,
                        date: date.value,
                        force_update: forceUpdate
                    })

                    if(cartErrors.value.length === 0) window.location.reload()
                }

                const remove = async (productId) => {

                    isLoading.value = true

                    await removeProduct(productId)
                    if(cartErrors.value.length === 0) await loadCart()
                    if(!cart.value.items || cart.value.items.length === 0) window.location.reload()

                    isLoading.value = false
                }

                return {
                    datepicker,
                    cart,
                    date,
                    location,

                    showAddons,
                    addons,

                    update,
                    remove,
                    reloadCart,
                    updateCartMeta,

                    editId,
                    modalProduct,
                    dateOrLocationChanged,

                    isLoading,
                    messages: cartErrors,
                    showForceCartUpdate,
                }
            }
        }).mount(el);

    }


}