#![allow(non_snake_case)]
use yew::prelude::*;
use yewdux::prelude::*;

use crate::components::new_plate_dialog::NewPlateDialog;
use crate::components::plates::plate_container::PlateContainer;
use crate::components::states::{CurrentTransfer, MainState};
use crate::components::transfer_menu::TransferMenu;
use crate::components::tree::Tree;

use plate_tool_lib::plate_instances::PlateInstance;

use crate::components::callbacks::main_window_callbacks;

#[function_component]
pub fn MainWindow() -> Html {
    let (main_state, main_dispatch) = use_store::<MainState>();
    let (_, ct_dispatch) = use_store::<CurrentTransfer>();

    let source_plate_instance: Option<PlateInstance> = main_state
        .source_plates
        .iter()
        .find(|spi| spi.get_uuid() == main_state.selected_source_plate)
        .cloned();
    if let Some(spi) = source_plate_instance.clone() {
        ct_dispatch.reduce_mut(|state| {
            state.transfer.transfer_region.source_plate = spi.plate;
        });
    }
    let destination_plate_instance: Option<PlateInstance> = main_state
        .destination_plates
        .iter()
        .find(|dpi| dpi.get_uuid() == main_state.selected_dest_plate)
        .cloned();
    if let Some(dpi) = destination_plate_instance.clone() {
        ct_dispatch.reduce_mut(|state| {
            state.transfer.transfer_region.dest_plate = dpi.plate;
        });
    }

    let toggle_in_transfer_hashes_callback = {
        let main_dispatch = main_dispatch.clone();
        main_window_callbacks::toggle_in_transfer_hashes_callback(main_dispatch)
    };

    let new_plate_dialog_is_open = use_state_eq(|| false);
    let new_plate_dialog_callback =
        main_window_callbacks::new_plate_dialog_callback(new_plate_dialog_is_open.clone());

    let open_new_plate_dialog_callback =
        main_window_callbacks::open_new_plate_dialog_callback(new_plate_dialog_is_open.clone());

    let new_button_callback = {
        let main_dispatch = main_dispatch.clone();
        main_window_callbacks::new_button_callback(main_dispatch, ct_dispatch)
    };

    let export_csv_button_callback = {
        let main_state = main_state.clone();
        main_window_callbacks::export_csv_button_callback(main_state)
    };

    let export_json_button_callback =
        { main_window_callbacks::export_json_button_callback(main_state) };

    let import_json_button_callback = {
        let main_dispatch = main_dispatch.clone();
        main_window_callbacks::import_json_button_callback(main_dispatch)
    };

    let import_transfer_csv_callback =
        main_window_callbacks::import_transfer_csv_callback(main_dispatch.clone());

    html! {
        <>
        <div class="upper_menu">
            <div class="dropdown">
                <button>{"File"}</button>
                <button onclick={new_button_callback}>{"New"}</button>
                <div class="dropdown-sub">
                    <button>{"Export"}</button>
                    <div>
                        <button onclick={export_csv_button_callback}>{"Export as CSV"}</button>
                        <button onclick={export_json_button_callback}>{"Export as JSON"}</button>
                    </div>
                </div>
                <div class="dropdown-sub">
                    <button>{"Import"}</button>
                    <div>
                        <button onclick={import_json_button_callback}>{"Import from JSON"}</button>
                        <button onclick={import_transfer_csv_callback}>{"Import Transfer from CSV"}</button>
                    </div>
                </div>
            </div>
            <div class="dropdown">
                <button>{"Options"}</button>
                <div class="dropdown-sub">
                    <button>{"Styles"}</button>
                    <div>
                    <button onclick={toggle_in_transfer_hashes_callback}>{"Toggle transfer hashes"}</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="main_container">
            <Tree open_new_plate_callback={open_new_plate_dialog_callback}/>
            <TransferMenu />
            <PlateContainer source_dims={source_plate_instance}
             destination_dims={destination_plate_instance}/>
            if {*new_plate_dialog_is_open} {
            <NewPlateDialog close_callback={new_plate_dialog_callback}/>
            }
        </div>
        </>
    }
}
