use std::{cell::RefCell, rc, sync::Mutex};

use common::{utils::substitute, web_api};
use gloo::{
    events::{EventListener, EventListenerOptions},
    utils::{document, window},
};
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;
use web_sys::{
    DragEvent, Element, HtmlDivElement, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement,
    KeyboardEvent,
};

use crate::{
    modal_dialog, request, ron_request,
    utils::{SelectorExt, by_id, get_current_lang, selector, selector_and_clone},
};

pub fn setup_page(recipe_id: i64) {
    // Title.
    {
        // Here we check if the first element exists,
        // if not, the recipe edit page hasn't been loaded
        // and we return from the function without panicking.
        let title = match document().get_element_by_id("input-title") {
            Some(e) => e.dyn_into::<HtmlInputElement>().unwrap(),
            None => return,
        };

        let mut current_title = title.value();
        EventListener::new(&title.clone(), "blur", move |_event| {
            if title.value() != current_title {
                current_title = title.value();
                let title = title.value();
                spawn_local(async move {
                    let _ = ron_request::patch::<(), _>(
                        &format!("/ron-api/recipe/{recipe_id}/title"),
                        title,
                    )
                    .await;
                    reload_recipes_list(recipe_id).await;
                });
            }
        })
        .forget();
    }

    // Description.
    {
        let description: HtmlTextAreaElement = by_id("text-area-description");
        let mut current_description = description.value();

        EventListener::new(&description.clone(), "blur", move |_event| {
            if description.value() != current_description {
                current_description = description.value();
                let description = description.value();
                spawn_local(async move {
                    let _ = ron_request::patch::<(), _>(
                        &format!("/ron-api/recipe/{recipe_id}/description"),
                        description,
                    )
                    .await;
                });
            }
        })
        .forget();
    }

    // Servings.
    {
        let servings: HtmlInputElement = by_id("input-servings");
        let mut current_servings = servings.value_as_number();
        EventListener::new(&servings.clone(), "input", move |_event| {
            let n = servings.value_as_number();
            if n.is_nan() {
                servings.set_value("");
            }
            if n != current_servings {
                let servings = if n.is_nan() {
                    None
                } else {
                    let n = n as u32;
                    servings.set_value_as_number(n as f64);
                    Some(n)
                };
                current_servings = n;
                spawn_local(async move {
                    let _ = ron_request::patch::<(), _>(
                        &format!("/ron-api/recipe/{recipe_id}/servings"),
                        servings,
                    )
                    .await;
                });
            }
        })
        .forget();
    }

    // Estimated time.
    {
        let estimated_time: HtmlInputElement = by_id("input-estimated-time");
        let mut current_time = estimated_time.value_as_number();

        EventListener::new(&estimated_time.clone(), "input", move |_event| {
            let n = estimated_time.value_as_number();
            if n.is_nan() {
                estimated_time.set_value("");
            }
            if n != current_time {
                let time = if n.is_nan() {
                    None
                } else {
                    let n = n as u32;
                    estimated_time.set_value_as_number(n as f64);
                    Some(n)
                };
                current_time = n;
                spawn_local(async move {
                    let _ = ron_request::patch::<(), _>(
                        &format!("/ron-api/recipe/{recipe_id}/estimated_time"),
                        time,
                    )
                    .await;
                });
            }
        })
        .forget();
    }

    // Difficulty.
    {
        let difficulty: HtmlSelectElement = by_id("select-difficulty");
        let mut current_difficulty = difficulty.value();

        EventListener::new(&difficulty.clone(), "blur", move |_event| {
            if difficulty.value() != current_difficulty {
                current_difficulty = difficulty.value();
                let difficulty =
                    web_api::Difficulty::from_repr(difficulty.value().parse::<u32>().unwrap())
                        .unwrap_or(web_api::Difficulty::Unknown);
                spawn_local(async move {
                    let _ = ron_request::patch::<(), _>(
                        &format!("/ron-api/recipe/{recipe_id}/difficulty"),
                        difficulty,
                    )
                    .await;
                });
            }
        })
        .forget();
    }

    // Tags.
    {
        spawn_local(async move {
            let tags: Vec<String> = ron_request::get(&format!("/ron-api/recipe/{recipe_id}/tags"))
                .await
                .unwrap();
            create_tag_elements(recipe_id, &tags);
        });

        fn add_tags(recipe_id: i64, tags: String) {
            spawn_local(async move {
                let tag_list: Vec<String> =
                    tags.split_whitespace().map(str::to_lowercase).collect();
                let _ = ron_request::post::<(), _>(
                    &format!("/ron-api/recipe/{recipe_id}/tags"),
                    Some(&tag_list),
                )
                .await;
                create_tag_elements(recipe_id, &tag_list);

                by_id::<HtmlInputElement>("input-tags").set_value("");
            });
        }

        let input_tags: HtmlInputElement = by_id("input-tags");
        EventListener::new(&input_tags.clone(), "input", move |_event| {
            let tags = input_tags.value();
            if tags.ends_with(' ') {
                add_tags(recipe_id, tags);
            }
        })
        .forget();

        let input_tags: HtmlInputElement = by_id("input-tags");
        EventListener::new(&input_tags.clone(), "keypress", move |event| {
            if let Some(keyboard_event) = event.dyn_ref::<KeyboardEvent>() {
                if keyboard_event.key_code() == 13 {
                    let tags = input_tags.value();
                    add_tags(recipe_id, tags);
                }
            }
        })
        .forget();

        let input_tags: HtmlInputElement = by_id("input-tags");
        EventListener::new(&input_tags.clone(), "blur", move |_event| {
            let tags = input_tags.value();
            add_tags(recipe_id, tags);
        })
        .forget();
    }

    // Language.
    {
        let language: HtmlSelectElement = by_id("select-language");
        let mut current_language = language.value();
        EventListener::new(&language.clone(), "blur", move |_event| {
            if language.value() != current_language {
                current_language = language.value();
                let language = language.value();
                spawn_local(async move {
                    let _ = ron_request::patch::<(), _>(
                        &format!("/ron-api/recipe/{recipe_id}/language"),
                        language,
                    )
                    .await;
                });
            }
        })
        .forget();
    }

    // Is public.
    {
        let is_public: HtmlInputElement = by_id("input-is-public");
        EventListener::new(&is_public.clone(), "input", move |_event| {
            let is_public = is_public.checked();
            spawn_local(async move {
                let _ = ron_request::patch::<(), _>(
                    &format!("/ron-api/recipe/{recipe_id}/is_public"),
                    is_public,
                )
                .await;
                reload_recipes_list(recipe_id).await;
            });
        })
        .forget();
    }

    // Delete recipe button.
    let delete_button: HtmlInputElement = by_id("input-delete");
    EventListener::new(&delete_button, "click", move |_event| {
        spawn_local(async move {
            if modal_dialog::show_and_initialize(
                "#hidden-templates .recipe-delete-confirmation",
                async |element| {
                    let title: HtmlInputElement = by_id("input-title");
                    element.set_inner_html(&substitute(
                        &element.inner_html(),
                        "{}",
                        &[&title.value()],
                    ));
                },
            )
            .await
            .is_some()
            {
                if let Ok(()) =
                    ron_request::delete::<_, ()>(&format!("/ron-api/recipe/{recipe_id}"), None)
                        .await
                {
                    window()
                        .location()
                        .set_href(&format!(
                            "/{}/?{}={}&{}={}",
                            get_current_lang(),
                            common::consts::GET_PARAMETER_USER_MESSAGE,
                            common::translation::Sentence::RecipeSuccessfullyDeleted as i64,
                            common::consts::GET_PARAMETER_USER_MESSAGE_LEVEL,
                            common::toast::Level::Success as usize
                        ))
                        .unwrap();
                }
            }
        });
    })
    .forget();

    // Load initial groups, steps and ingredients.
    {
        spawn_local(async move {
            let groups: Vec<common::web_api::Group> =
                ron_request::get(&format!("/ron-api/recipe/{recipe_id}/groups"))
                    .await
                    .unwrap();

            for group in groups {
                let group_element = create_group_element(&group);

                for step in group.steps {
                    let step_element =
                        create_step_element(&group_element.selector(".steps"), &step);

                    for ingredient in step.ingredients {
                        create_ingredient_element(
                            &step_element.selector(".ingredients"),
                            &ingredient,
                        );
                    }
                }
            }
        });
    }

    // Add a new group.
    {
        let button_add_group: HtmlInputElement = by_id("input-add-group");
        EventListener::new(&button_add_group, "click", move |_event| {
            spawn_local(async move {
                let id: i64 =
                    ron_request::post::<_, ()>(&format!("/ron-api/recipe/{recipe_id}/group"), None)
                        .await
                        .unwrap();
                create_group_element(&web_api::Group {
                    id,
                    name: "".to_string(),
                    comment: "".to_string(),
                    steps: vec![],
                });
            });
        })
        .forget();
    }
}

fn create_group_element(group: &web_api::Group) -> Element {
    let group_id = group.id;
    let group_element: Element = selector_and_clone("#hidden-templates .group");
    group_element.set_id(&format!("group-{}", group.id));

    let groups_container: Element = by_id("groups-container");
    groups_container.append_child(&group_element).unwrap();

    set_draggable(&group_element, "group", |_element| {
        spawn_local(async move {
            let ids: Vec<i64> = by_id::<Element>("groups-container")
                .selector_all::<Element>(".group")
                .into_iter()
                .map(|e| e.id()[6..].parse::<i64>().unwrap())
                .collect();

            let _ = ron_request::patch::<(), _>("/ron-api/groups/order", ids).await;
        });
    });

    // Group name.
    let name = group_element.selector::<HtmlInputElement>(".input-group-name");
    name.set_value(&group.name);
    let mut current_name = group.name.clone();
    EventListener::new(&name.clone(), "blur", move |_event| {
        if name.value() != current_name {
            current_name = name.value();
            let name = name.value();
            spawn_local(async move {
                let _ =
                    ron_request::patch::<(), _>(&format!("/ron-api/group/{group_id}/name"), name)
                        .await;
            })
        }
    })
    .forget();

    // Group comment.
    let comment: HtmlInputElement = group_element.selector(".input-group-comment");
    comment.set_value(&group.comment);
    let mut current_comment = group.comment.clone();
    EventListener::new(&comment.clone(), "blur", move |_event| {
        if comment.value() != current_comment {
            current_comment = comment.value();
            let comment = comment.value();
            spawn_local(async move {
                let _ = ron_request::patch::<(), _>(
                    &format!("/ron-api/group/{group_id}/comment"),
                    comment,
                )
                .await;
            });
        }
    })
    .forget();

    // Delete button.
    let group_element_cloned = group_element.clone();
    let delete_button: HtmlInputElement = group_element.selector(".input-group-delete");
    EventListener::new(&delete_button, "click", move |_event| {
        // FIXME: How to avoid cloning twice?
        let group_element_cloned = group_element_cloned.clone();
        spawn_local(async move {
            if modal_dialog::show_and_initialize(
                "#hidden-templates .recipe-group-delete-confirmation",
                async move |element| {
                    let name = group_element_cloned
                        .selector::<HtmlInputElement>(".input-group-name")
                        .value();
                    element.set_inner_html(&substitute(&element.inner_html(), "{}", &[&name]));
                },
            )
            .await
            .is_some()
            {
                let _ = ron_request::delete::<(), ()>(&format!("/ron-api/group/{group_id}"), None)
                    .await;
                let group_element = by_id::<Element>(&format!("group-{group_id}"));
                group_element.next_element_sibling().unwrap().remove();
                group_element.remove();
            }
        });
    })
    .forget();

    // Add step button.
    let add_step_button: HtmlInputElement = group_element.selector(".input-add-step");
    EventListener::new(&add_step_button, "click", move |_event| {
        spawn_local(async move {
            let id: i64 =
                ron_request::post::<_, ()>(&format!("/ron-api/group/{group_id}/step"), None)
                    .await
                    .unwrap();
            create_step_element(
                &selector::<Element>(&format!("#group-{group_id} .steps")),
                &web_api::Step {
                    id,
                    action: "".to_string(),
                    ingredients: vec![],
                },
            );
        });
    })
    .forget();

    group_element
}

fn create_tag_elements<T>(recipe_id: i64, tags: &[T])
where
    T: AsRef<str>,
{
    let tags_span: Element = selector("#container-tags .tags");

    // Collect current tags to avoid re-adding an existing tag.
    let mut current_tags: Vec<String> = vec![];
    let mut current_tag_element = tags_span.first_child();
    while let Some(element) = current_tag_element {
        current_tags.push(
            element
                .dyn_ref::<Element>()
                .unwrap()
                .text_content()
                .unwrap(),
        );
        current_tag_element = element.next_sibling();
    }

    for tag in tags {
        let tag = tag.as_ref().to_string();
        if current_tags.contains(&tag) {
            continue;
        }
        let tag_span = document().create_element("span").unwrap();
        tag_span.set_class_name("tag");
        tag_span.set_inner_html(&tag);
        let delete_tag_button: HtmlInputElement = document()
            .create_element("input")
            .unwrap()
            .dyn_into()
            .unwrap();
        delete_tag_button.set_attribute("type", "button").unwrap();
        delete_tag_button.set_attribute("value", "✖").unwrap();
        tag_span.append_child(&delete_tag_button).unwrap();
        tags_span.append_child(&tag_span).unwrap();

        EventListener::new(&delete_tag_button, "click", move |_event| {
            let tag_span = tag_span.clone();
            let tag = tag.clone();
            spawn_local(async move {
                let _ = ron_request::delete::<(), _>(
                    &format!("/ron-api/recipe/{recipe_id}/tags"),
                    Some(vec![tag]),
                )
                .await;
                tag_span.remove();
            });
        })
        .forget();
    }
}

fn create_step_element(group_element: &Element, step: &web_api::Step) -> Element {
    let step_id = step.id;
    let step_element: Element = selector_and_clone("#hidden-templates .step");
    step_element.set_id(&format!("step-{}", step.id));
    group_element.append_child(&step_element).unwrap();

    set_draggable(&step_element, "step", |element| {
        let element = element.clone();
        spawn_local(async move {
            let ids: Vec<i64> = element
                .parent_element()
                .unwrap()
                .selector_all::<Element>(".step")
                .into_iter()
                .map(|e| e.id()[5..].parse::<i64>().unwrap())
                .collect();

            let _ = ron_request::patch::<(), _>("/ron-api/steps/order", ids).await;
        });
    });

    // Step action.
    let action: HtmlTextAreaElement = step_element.selector(".text-area-step-action");
    action.set_value(&step.action);
    let mut current_action = step.action.clone();
    EventListener::new(&action.clone(), "blur", move |_event| {
        if action.value() != current_action {
            current_action = action.value();
            let action = action.value();
            spawn_local(async move {
                let _ =
                    ron_request::patch::<(), _>(&format!("/ron-api/step/{step_id}/action"), action)
                        .await;
            });
        }
    })
    .forget();

    // Delete button.
    let step_element_cloned = step_element.clone();
    let delete_button: HtmlInputElement = step_element.selector(".input-step-delete");
    EventListener::new(&delete_button, "click", move |_event| {
        // FIXME: How to avoid cloning twice?
        let step_element_cloned = step_element_cloned.clone();
        spawn_local(async move {
            if modal_dialog::show_and_initialize(
                "#hidden-templates .recipe-step-delete-confirmation",
                async move |element| {
                    let action = step_element_cloned
                        .selector::<HtmlTextAreaElement>(".text-area-step-action")
                        .value();
                    element.set_inner_html(&substitute(&element.inner_html(), "{}", &[&action]));
                },
            )
            .await
            .is_some()
            {
                let _ =
                    ron_request::delete::<(), ()>(&format!("/ron-api/step/{step_id}"), None).await;
                let step_element = by_id::<Element>(&format!("step-{step_id}"));
                step_element.next_element_sibling().unwrap().remove();
                step_element.remove();
            }
        });
    })
    .forget();

    // Add ingredient button.
    let add_ingredient_button: HtmlInputElement = step_element.selector(".input-add-ingredient");
    EventListener::new(&add_ingredient_button, "click", move |_event| {
        spawn_local(async move {
            let id: i64 =
                ron_request::post::<_, ()>(&format!("/ron-api/step/{step_id}/ingredient"), None)
                    .await
                    .unwrap();
            create_ingredient_element(
                &selector::<Element>(&format!("#step-{} .ingredients", step_id)),
                &web_api::Ingredient {
                    id,
                    name: "".to_string(),
                    comment: "".to_string(),
                    quantity_value: None,
                    quantity_unit: "".to_string(),
                },
            );
        });
    })
    .forget();

    step_element
}

fn create_ingredient_element(step_element: &Element, ingredient: &web_api::Ingredient) -> Element {
    let ingredient_id = ingredient.id;
    let ingredient_element: Element = selector_and_clone("#hidden-templates .ingredient");
    ingredient_element.set_id(&format!("ingredient-{}", ingredient.id));
    step_element.append_child(&ingredient_element).unwrap();

    set_draggable(&ingredient_element, "ingredient", |element| {
        let element = element.clone();
        spawn_local(async move {
            let ids: Vec<i64> = element
                .parent_element()
                .unwrap()
                .selector_all::<Element>(".ingredient")
                .into_iter()
                .map(|e| e.id()[11..].parse::<i64>().unwrap())
                .collect();

            let _ = ron_request::patch::<(), _>("/ron-api/ingredients/order", ids).await;
        });
    });

    // Ingredient name.
    let name: HtmlInputElement = ingredient_element.selector(".input-ingredient-name");
    name.set_value(&ingredient.name);
    let mut current_name = ingredient.name.clone();
    EventListener::new(&name.clone(), "blur", move |_event| {
        if name.value() != current_name {
            current_name = name.value();
            let name = name.value();
            spawn_local(async move {
                let _ = ron_request::patch::<(), _>(
                    &format!("/ron-api/ingredient/{ingredient_id}/name"),
                    name,
                )
                .await;
            });
        }
    })
    .forget();

    // Ingredient comment.
    let comment: HtmlInputElement = ingredient_element.selector(".input-ingredient-comment");
    comment.set_value(&ingredient.comment);
    let mut current_comment = ingredient.comment.clone();
    EventListener::new(&comment.clone(), "blur", move |_event| {
        if comment.value() != current_comment {
            current_comment = comment.value();
            let comment = comment.value();
            spawn_local(async move {
                let _ = ron_request::patch::<(), _>(
                    &format!("/ron-api/ingredient/{ingredient_id}/comment"),
                    comment,
                )
                .await;
            });
        }
    })
    .forget();

    // Ingredient quantity.
    let quantity: HtmlInputElement = ingredient_element.selector(".input-ingredient-quantity");
    quantity.set_value(
        &ingredient
            .quantity_value
            .map_or("".to_string(), |q| q.to_string()),
    );
    let mut current_quantity = quantity.value_as_number();
    EventListener::new(&quantity.clone(), "input", move |_event| {
        let n = quantity.value_as_number();
        if n.is_nan() {
            quantity.set_value("");
        }
        if n != current_quantity {
            let q = if n.is_nan() { None } else { Some(n) };
            current_quantity = n;
            spawn_local(async move {
                let _ = ron_request::patch::<(), _>(
                    &format!("/ron-api/ingredient/{ingredient_id}/quantity"),
                    q,
                )
                .await;
            });
        }
    })
    .forget();

    // Ingredient unit.
    let unit: HtmlInputElement = ingredient_element.selector(".input-ingredient-unit");
    unit.set_value(&ingredient.quantity_unit);
    let mut current_unit = ingredient.quantity_unit.clone();
    EventListener::new(&unit.clone(), "blur", move |_event| {
        if unit.value() != current_unit {
            current_unit = unit.value();
            let unit = unit.value();
            spawn_local(async move {
                let _ = ron_request::patch::<(), _>(
                    &format!("/ron-api/ingredient/{ingredient_id}/unit"),
                    unit,
                )
                .await;
            });
        }
    })
    .forget();

    // Delete button.
    let ingredient_element_cloned = ingredient_element.clone();
    let delete_button: HtmlInputElement = ingredient_element.selector(".input-ingredient-delete");
    EventListener::new(&delete_button, "click", move |_event| {
        // FIXME: How to avoid cloning twice?
        let ingredient_element_cloned = ingredient_element_cloned.clone();
        spawn_local(async move {
            if modal_dialog::show_and_initialize(
                "#hidden-templates .recipe-ingredient-delete-confirmation",
                async move |element| {
                    let name = ingredient_element_cloned
                        .selector::<HtmlInputElement>(".input-ingredient-name")
                        .value();
                    element.set_inner_html(&substitute(&element.inner_html(), "{}", &[&name]));
                },
            )
            .await
            .is_some()
            {
                let _ = ron_request::delete::<(), ()>(
                    &format!("/ron-api/ingredient/{ingredient_id}"),
                    None,
                )
                .await;
                let ingredient_element = by_id::<Element>(&format!("ingredient-{ingredient_id}"));
                ingredient_element.next_element_sibling().unwrap().remove();
                ingredient_element.remove();
            }
        });
    })
    .forget();

    ingredient_element
}

async fn reload_recipes_list(current_recipe_id: i64) {
    let fragment: String = request::get_with_params(
        "/fragments/recipes_list",
        web_api::RecipesListFragmentsParams {
            current_recipe_id: Some(current_recipe_id),
        },
    )
    .await
    .unwrap();

    let list = document().get_element_by_id("recipes-list").unwrap();
    list.set_outer_html(&fragment);
}

enum CursorPosition {
    UpperPart,
    LowerPart,
}

fn get_cursor_position(mouse_y: f64, element: &Element) -> CursorPosition {
    let element_y = element.get_bounding_client_rect().y();
    // Between 0 (top) and 1 (bottom).
    let y_relative_pos = (mouse_y - element_y) / element.get_bounding_client_rect().height();
    if y_relative_pos < 0.5 {
        CursorPosition::UpperPart
    } else {
        CursorPosition::LowerPart
    }
}

fn get_parent_with_id_starting_with(mut element: Element, prefix: &str) -> Element {
    while !element.id().starts_with(prefix) {
        element = element.parent_element().unwrap();
    }
    element
}

// It replaces 'event.data_transfer().unwrap().get_data()/set_data()' because
// Chrome prevent to read this during draghover event which is the correct behavior
// according the specifications:
// * https://html.spec.whatwg.org/multipage/dnd.html#the-drag-data-store
static DATA_DRAGGED: Mutex<RefCell<String>> = Mutex::new(RefCell::new(String::new()));

/// Set an element as draggable and add an element before and after
/// cloned from "#hidden-templates .dropzone".
/// All elements set as draggable in a given container can be dragged
/// After or before another element.
/// 'element' must have a sub-element with the class '.drag-handle' which
/// will be used to drag the element.
fn set_draggable<T>(element: &Element, prefix: &str, dropped: T)
where
    T: Fn(&Element) + 'static,
{
    let dropped = rc::Rc::new(dropped);

    // Add a drop zone before the given element if there is none.
    if element.previous_element_sibling().is_none() {
        let dropzone = selector_and_clone::<Element>("#hidden-templates .dropzone");
        element.before_with_node_1(&dropzone).unwrap();
        setup_dragzone_events(&dropzone, prefix, dropped.clone());
    }

    let dropzone = selector_and_clone::<Element>("#hidden-templates .dropzone");
    element.after_with_node_1(&dropzone).unwrap();
    setup_dragzone_events(&dropzone, prefix, dropped.clone());

    // DRAGOVER.
    let prefix_copied = prefix.to_string();
    EventListener::new_with_options(
        element,
        "dragover",
        EventListenerOptions::enable_prevent_default(),
        move |event| {
            let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();

            let drag_data_lock = DATA_DRAGGED.lock().unwrap();
            let drag_data = drag_data_lock.borrow();

            if drag_data.starts_with(&prefix_copied) {
                let element: Element = by_id(&drag_data);
                let element_target = event
                    .current_target()
                    .unwrap()
                    .dyn_into::<Element>()
                    .unwrap();

                if element.parent_element() != element_target.parent_element() {
                    return;
                }

                event.prevent_default();

                let cursor_position = get_cursor_position(event.client_y() as f64, &element_target);

                element_target
                    .previous_element_sibling()
                    .unwrap()
                    .set_class_name(match cursor_position {
                        CursorPosition::UpperPart => "dropzone hover",
                        CursorPosition::LowerPart => "dropzone active",
                    });

                element_target
                    .next_element_sibling()
                    .unwrap()
                    .set_class_name(match cursor_position {
                        CursorPosition::UpperPart => "dropzone active",
                        CursorPosition::LowerPart => "dropzone hover",
                    });
            }
        },
    )
    .forget();

    // DRAGLEAVE.
    let prefix_copied = prefix.to_string();
    EventListener::new(element, "dragleave", move |event| {
        let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();

        let drag_data_lock = DATA_DRAGGED.lock().unwrap();
        let drag_data = drag_data_lock.borrow();

        if drag_data.starts_with(&prefix_copied) {
            let element: Element = by_id(&drag_data);
            let element_target = event
                .current_target()
                .unwrap()
                .dyn_into::<Element>()
                .unwrap();

            if element.parent_element() != element_target.parent_element() {
                return;
            }

            element_target
                .previous_element_sibling()
                .unwrap()
                .set_class_name("dropzone active");

            element_target
                .next_element_sibling()
                .unwrap()
                .set_class_name("dropzone active");
        }
    })
    .forget();

    // DROP.
    let prefix_copied = prefix.to_string();
    EventListener::new(element, "drop", move |event| {
        let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();

        let drag_data_lock = DATA_DRAGGED.lock().unwrap();
        let drag_data = drag_data_lock.borrow();

        if drag_data.starts_with(&prefix_copied) {
            let target: Element = event.current_target().unwrap().dyn_into().unwrap();
            let element: Element = by_id(&drag_data);
            let dropzone: Element = element.next_element_sibling().unwrap();

            if element.parent_element() != target.parent_element() {
                return;
            }

            match get_cursor_position(event.client_y() as f64, &element) {
                CursorPosition::UpperPart => {
                    target
                        .previous_element_sibling()
                        .unwrap()
                        .after_with_node_1(&element)
                        .unwrap();
                    element.after_with_node_1(&dropzone).unwrap();
                }
                CursorPosition::LowerPart => {
                    target
                        .next_element_sibling()
                        .unwrap()
                        .after_with_node_1(&element)
                        .unwrap();
                    element.after_with_node_1(&dropzone).unwrap();
                }
            }

            dropped(&element);
        }
    })
    .forget();

    // MOUSEDOWN.
    let drag_handle: Element = element.selector(".drag-handle");
    EventListener::new(&drag_handle, "mousedown", |event| {
        event
            .current_target()
            .unwrap()
            .dyn_into::<Element>()
            .unwrap()
            .parent_element()
            .unwrap()
            .set_attribute("draggable", "true")
            .unwrap();
    })
    .forget();

    // MOUSEUP.
    EventListener::new(&drag_handle, "mouseup", |event| {
        event
            .current_target()
            .unwrap()
            .dyn_into::<Element>()
            .unwrap()
            .parent_element()
            .unwrap()
            .set_attribute("draggable", "false")
            .unwrap();
    })
    .forget();

    // DRAGSTART.
    let prefix_copied = prefix.to_string();
    EventListener::new(element, "dragstart", move |event| {
        let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
        let target_element: Element = event.current_target().unwrap().dyn_into().unwrap();

        if target_element.id().starts_with(&prefix_copied) {
            event.stop_propagation();

            // Highlight where the group can be droppped.
            for dp in target_element
                .parent_element()
                .unwrap()
                .selector_all::<HtmlDivElement>(".dropzone")
            {
                if dp.parent_element() == target_element.parent_element() {
                    dp.set_class_name("dropzone active");
                }
            }

            let drag_data_lock = DATA_DRAGGED.lock().unwrap();
            drag_data_lock.replace(target_element.id());

            event.data_transfer().unwrap().set_effect_allowed("move");
        }
    })
    .forget();

    // DRAGEND.
    let prefix_copied = prefix.to_string();
    EventListener::new(element, "dragend", move |event| {
        let target_element: Element = event.current_target().unwrap().dyn_into().unwrap();
        target_element.set_attribute("draggable", "false").unwrap();
        if target_element.id().starts_with(&prefix_copied) {
            for dp in target_element
                .parent_element()
                .unwrap()
                .selector_all::<HtmlDivElement>(".dropzone")
            {
                dp.set_class_name("dropzone");
            }
        }
    })
    .forget();

    fn setup_dragzone_events<T>(dropzone: &Element, prefix: &str, dropped: rc::Rc<T>)
    where
        T: Fn(&Element) + 'static,
    {
        // DRAGOVER (dropzone).
        let prefix_copied = prefix.to_string();
        EventListener::new_with_options(
            dropzone,
            "dragover",
            EventListenerOptions::enable_prevent_default(),
            move |event| {
                let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();

                let drag_data_lock = DATA_DRAGGED.lock().unwrap();
                let drag_data = drag_data_lock.borrow();

                if drag_data.starts_with(&prefix_copied) {
                    let element: Element = by_id(&drag_data);
                    let element_target = event
                        .current_target()
                        .unwrap()
                        .dyn_into::<Element>()
                        .unwrap();

                    if element.parent_element() != element_target.parent_element() {
                        return;
                    }

                    event.prevent_default();

                    event
                        .current_target()
                        .unwrap()
                        .dyn_into::<Element>()
                        .unwrap()
                        .set_class_name("dropzone hover");
                }
            },
        )
        .forget();

        // DRAGLEAVE (dropzone).
        let prefix_copied = prefix.to_string();
        EventListener::new(dropzone, "dragleave", move |event| {
            let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();

            let drag_data_lock = DATA_DRAGGED.lock().unwrap();
            let drag_data = drag_data_lock.borrow();

            if drag_data.starts_with(&prefix_copied) {
                let element: Element = by_id(&drag_data);
                let element_target = event
                    .current_target()
                    .unwrap()
                    .dyn_into::<Element>()
                    .unwrap();

                if element.parent_element() != element_target.parent_element() {
                    return;
                }

                event
                    .current_target()
                    .unwrap()
                    .dyn_into::<Element>()
                    .unwrap()
                    .set_class_name("dropzone active");
            }
        })
        .forget();

        // DROP (dropzone).
        let prefix_copied = prefix.to_string();
        EventListener::new(dropzone, "drop", move |event| {
            let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();

            let drag_data_lock = DATA_DRAGGED.lock().unwrap();
            let drag_data = drag_data_lock.borrow();

            if drag_data.starts_with(&prefix_copied) {
                let target: Element = event.current_target().unwrap().dyn_into().unwrap();
                let element: Element = by_id(&drag_data);
                let dropzone: Element = element.next_element_sibling().unwrap();

                if element.parent_element() != target.parent_element() {
                    return;
                }

                target.after_with_node_1(&element).unwrap();
                element.after_with_node_1(&dropzone).unwrap();

                dropped(&element);
            }
        })
        .forget();
    }
}