use bounce::helmet::Helmet;
use cynic::{MutationBuilder, QueryBuilder};
use std::rc::Rc;
use web_sys::HtmlInputElement;
use yew::prelude::*;
use yewdux::prelude::*;

use crate::{
    components,
    graphql::{self, ReqwestExt},
    stores,
};

pub enum Msg {
    Void,

    UpdateUser(Rc<stores::User>),
    LoadUsers,
    UsersDone(graphql::GraphQLResult<graphql::queries::Users>),

    OpenNewModal,
    CloseNewModal,
    NewModalSubmit,
    NewModalSubmitDone(graphql::GraphQLResult<graphql::queries::CreateRepository>),

    OpenEditModal(usize, usize),
    CloseEditModal,
    Delete,
    DeleteDone(graphql::GraphQLResult<graphql::queries::DeleteRepository>),
}

pub struct Index {
    notifications_dispatch: Dispatch<stores::Notifications>,
    user: Rc<stores::User>,
    _user_dispatch: Dispatch<stores::User>,
    loading: bool,
    users: Vec<graphql::queries::User>,

    new_modal: bool,
    new_modal_save_loading: bool,
    new_modal_user: NodeRef,
    new_modal_repo: NodeRef,

    delete_modal: Option<(usize, usize)>,
    delete_modal_delete_loading: bool,
}

impl Component for Index {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        let notifications_dispatch = Dispatch::subscribe(ctx.link().callback(|_| Msg::Void));
        let user_dispatch = Dispatch::subscribe(ctx.link().callback(Msg::UpdateUser));

        ctx.link().send_message(Msg::LoadUsers);

        Self {
            notifications_dispatch,
            user: user_dispatch.get(),
            _user_dispatch: user_dispatch,
            loading: false,
            users: vec![],

            new_modal: false,
            new_modal_save_loading: false,
            new_modal_user: NodeRef::default(),
            new_modal_repo: NodeRef::default(),

            delete_modal: None,
            delete_modal_delete_loading: false,
        }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::Void => false,

            Msg::UpdateUser(x) => {
                self.user = x;

                true
            }
            Msg::LoadUsers => {
                self.loading = true;

                let client = graphql::client(None);
                let operation = graphql::queries::Users::build(());
                ctx.link().send_future(async move {
                    Msg::UsersDone(client.run_graphql(operation).await)
                });

                true
            }
            Msg::UsersDone(x) => {
                self.loading = false;

                match x {
                    Ok(resp) => {
                        if let Some(errors) = resp.errors {
                            self.notifications_dispatch.reduce_mut(|notifs| {
                                for e in errors {
                                    notifs.push(stores::Notification::danger(Some(
                                        components::notification::NotificationMessage::GraphQLError(
                                            e,
                                        ),
                                    )));
                                }
                            });

                            false
                        } else {
                            let data = resp.data.unwrap();
                            self.users = data.users;

                            true
                        }
                    }
                    Err(e) => {
                        self.notifications_dispatch.reduce_mut(|notifs| {
                            notifs.push(stores::Notification::danger(Some(
                                components::notification::NotificationMessage::Text(vec![
                                    e.to_string()
                                ]),
                            )));
                        });

                        false
                    }
                }
            }

            Msg::OpenNewModal => {
                self.new_modal = true;

                true
            }
            Msg::CloseNewModal => {
                self.new_modal = false;
                self.new_modal_save_loading = false;
                ctx.link().send_message(Msg::LoadUsers);

                true
            }
            Msg::NewModalSubmit => {
                let user = match self.new_modal_user.cast::<HtmlInputElement>() {
                    Some(x) => x.value(),
                    None => return false,
                };
                let name = match self.new_modal_repo.cast::<HtmlInputElement>() {
                    Some(x) => x.value(),
                    None => return false,
                };

                self.new_modal_save_loading = true;
                let operation = graphql::queries::CreateRepository::build(
                    graphql::queries::CreateRepositoryVariables { user, name },
                );
                let client = graphql::client(self.user.0.as_ref());
                ctx.link().send_future(async move {
                    Msg::NewModalSubmitDone(client.run_graphql(operation).await)
                });

                true
            }
            Msg::NewModalSubmitDone(x) => {
                self.new_modal_save_loading = false;

                match x {
                    Ok(resp) => {
                        if let Some(errors) = resp.errors {
                            self.notifications_dispatch.reduce_mut(|notifs| {
                                for e in errors {
                                    notifs.push(stores::Notification {
                                        notification_type: components::notification::NotificationType::Danger,
                                        message: Some(components::notification::NotificationMessage::GraphQLError(e)),
                                    });
                                }
                            });

                            true
                        } else {
                            ctx.link().send_message(Msg::CloseNewModal);

                            true
                        }
                    }
                    Err(e) => {
                        self.notifications_dispatch.reduce_mut(|notifs| {
                            notifs.push(stores::Notification::danger(Some(
                                components::notification::NotificationMessage::Text(vec![
                                    e.to_string()
                                ]),
                            )));
                        });

                        false
                    }
                }
            }

            Msg::OpenEditModal(i, j) => {
                self.delete_modal = Some((i, j));

                true
            }
            Msg::CloseEditModal => {
                self.delete_modal = None;
                self.delete_modal_delete_loading = false;
                ctx.link().send_message(Msg::LoadUsers);

                true
            }
            Msg::Delete => {
                let modal = self.delete_modal.unwrap();

                self.delete_modal_delete_loading = true;
                let operation = graphql::queries::DeleteRepository::build(
                    graphql::queries::DeleteRepositoryVariables {
                        id: self.users[modal.0].repositories[modal.1].id.to_owned(),
                    },
                );
                let client = graphql::client(self.user.0.as_ref());
                ctx.link().send_future(async move {
                    Msg::DeleteDone(client.run_graphql(operation).await)
                });

                true
            }
            Msg::DeleteDone(x) => match x {
                Ok(_) => {
                    self.delete_modal = None;
                    self.delete_modal_delete_loading = false;
                    ctx.link().send_message(Msg::LoadUsers);

                    true
                }
                Err(e) => {
                    self.notifications_dispatch.reduce_mut(|notifs| {
                        notifs.push(stores::Notification {
                            notification_type: components::notification::NotificationType::Danger,
                            message: Some(components::notification::NotificationMessage::Text(
                                vec![e.to_string()],
                            )),
                        });
                    });

                    false
                }
            },
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <>
                <Helmet>
                    <title>{ "Home" }</title>
                </Helmet>

                <div class={classes!("columns", "is-centered")}>
                    <div class={classes!("column", "is-half")}>
                        <div class={classes!("columns", "is-multiline")}>
                            <div class={classes!("column", "is-full")}>
                                <button
                                    class={classes!("button", "is-primary", "is-fullwidth")}
                                    onclick={ctx.link().callback(|_| Msg::OpenNewModal)}
                                >
                                    <span class={classes!("icon", "is-small")}>
                                        <i class={classes!("fa-solid", "fa-plus")} />
                                    </span>
                                    <span>{ "New" }</span>
                                </button>
                            </div>

                            if self.loading {
                                <div class={classes!("column", "is-full")}>
                                    <components::Loading />
                                </div>
                            } else {
                                {
                                    for self.users.iter().enumerate().map(|(i, user)| html! {
                                            <div class={classes!("column", "is-full")}>
                                                <components::UserPane
                                                    name={user.name.to_owned()}
                                                    repositories={user.repositories
                                                        .iter()
                                                        .map(|repo| components::user_pane::Repository {
                                                            name: repo.name.to_owned(),
                                                            url: None,
                                                        })
                                                        .collect::<Vec<_>>()
                                                    }
                                                    on_click={ctx.link().callback(move |j| Msg::OpenEditModal(i, j))}
                                                />
                                            </div>
                                    })
                                }
                            }
                        </div>
                    </div>
                </div>

                if self.new_modal {
                    <div class={classes!("modal", "is-active")}>
                        <div class={classes!("modal-background")} onclick={ctx.link().callback(|_| Msg::CloseNewModal)} />

                        <div class={classes!("modal-card")}>
                            <header class={classes!("modal-card-head")}>
                                <p class={classes!("modal-card-title")}>
                                    { "Edit" }
                                </p>
                                <button
                                    class={classes!("delete")}
                                    aria-label="close"
                                    onclick={ctx.link().callback(|_| Msg::CloseNewModal)}
                                />
                            </header>
                            <section class={classes!("modal-card-body")}>
                                <table class={classes!("table", "is-bordered", "is-striped", "is-hoverable", "is-fullwidth")}>
                                    <tbody>
                                        <tr>
                                            <th>{ "User" }</th>
                                            <td>
                                                <input
                                                    class={classes!("input")}
                                                    type="text"
                                                    required=true
                                                    placeholder="User"
                                                    ref={self.new_modal_user.clone()}
                                                />
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>{ "Repository" }</th>
                                            <td>
                                                <input
                                                    class={classes!("input")}
                                                    type="text"
                                                    required=true
                                                    placeholder="Repository"
                                                    ref={self.new_modal_repo.clone()}
                                                />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </section>
                            <footer class={classes!("modal-card-foot")}>
                                <div class={classes!("field", "is-grouped")}>
                                    <p class={classes!("control")}>
                                        <button
                                            class={classes!(
                                                "button",
                                                "is-success",
                                                if self.new_modal_save_loading { Some("is-loading") } else { None }
                                            )}
                                            onclick={ctx.link().callback(|_| Msg::NewModalSubmit)}
                                        >
                                            <span class={classes!("icon", "is-small")}>
                                                <i class={classes!("fa-solid", "fa-check")} />
                                            </span>
                                            <span>{ "Save" }</span>
                                        </button>
                                    </p>
                                    <p class={classes!("control")}>
                                        <button class={classes!("button")} onclick={ctx.link().callback(|_| Msg::CloseNewModal)}>
                                            { "Cancel" }
                                        </button>
                                    </p>
                                </div>
                            </footer>
                        </div>
                    </div>
                }

                if let Some(modal) = &self.delete_modal {
                    <div class={classes!("modal", "is-active")}>
                        <div class={classes!("modal-background")} onclick={ctx.link().callback(|_| Msg::CloseEditModal)} />

                        <div class={classes!("modal-card")}>
                            <header class={classes!("modal-card-head")}>
                                <p class={classes!("modal-card-title")}>
                                    { "Edit" }
                                </p>
                                <button
                                    class={classes!("delete")}
                                    aria-label="close"
                                    onclick={ctx.link().callback(|_| Msg::CloseEditModal)}
                                />
                            </header>
                            <section class={classes!("modal-card-body")}>
                                <p>
                                    { &self.users[modal.0].name }
                                    { "/" }
                                    { &self.users[modal.0].repositories[modal.1].name }
                                </p>
                            </section>
                            <footer class={classes!("modal-card-foot")}>
                                <div class={classes!("field", "is-grouped")}>
                                    <p class={classes!("control")}>
                                        <button
                                            class={classes!(
                                                "button",
                                                "is-danger",
                                                if self.delete_modal_delete_loading { Some("is-loading") } else { None }
                                            )}
                                            onclick={ctx.link().callback(|_| Msg::Delete)}
                                        >
                                            <span class={classes!("icon", "is-small")}>
                                                <i class={classes!("fa-solid", "fa-trash")} />
                                            </span>
                                            <span>{ "Delete" }</span>
                                        </button>
                                    </p>
                                    <p class={classes!("control")}>
                                        <button class={classes!("button")} onclick={ctx.link().callback(|_| Msg::CloseEditModal)}>
                                            { "Cancel" }
                                        </button>
                                    </p>
                                </div>
                            </footer>
                        </div>
                    </div>
                }
            </>
        }
    }
}