use dioxus::prelude::*;

use crate::components::{UnderConstruction, H1, HR};

#[component]
pub fn ProjectsPublications() -> Element {
    rsx! {
        UnderConstruction { },
        div {
            H1 { "Publications" }
            Publications { },
        },
        HR {},
        div {
            H1 { "Projects" }
            Projects { },
        }
    }
}

#[derive(Clone, PartialEq, Props)]
struct PublicationProp {
    #[props(default = "".to_string())]
    doi: String,
    authors: String,
    title: String,
    conference: String,
    #[props(default = "".to_string())]
    description: String,
}

fn Publications() -> Element {
    rsx! {
        div {
            class: "flex gap-4 items-center",
            Publication {
                doi: "https://doi.org/10.48550/arXiv.2307.09639",
                conference: "IEEE LCN 2023",
                title: "RPM: Reverse Path Congestion Marking on P4 Programmable Switches",
                authors: "N. Baganal-Krishna, T.-D. Tran, R. Kundel and A. Rizk",
                description: "
                    In this paper, we present Reverse Path Congestion Marking
                    (RPM) to accelerate the reaction to network congestion
                    events without changing the end-host stack. RPM decouples
                    the conges- tion signal from the downstream path after the
                    bottleneck while maintaining the stability of the
                    congestion control loop. We show that RPM improves
                    throughput fairness for RTT- heterogeneous TCP flows as
                    well as the flow completion time, especially for small
                    Data Center TCP (DCTCP) flows. around P4 programmable ASIC
                    switches."
            },

            Publication {
                doi: "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf",
                conference: "Seminar",
                title: "Overview of IoT Fuzzing Techniques",
                authors: "Tuan-Dat Tran",
                description: "
                    In this paper, we are comparing techniques used
                    by IoT fuzzers to circumvent the challenges presented 
                    by IoT devices and the constraints of the
                    solutions proposed by the IoT fuzzers."
            },
        }
    }
}
fn Publication(prop: PublicationProp) -> Element {
    rsx! {
        Link {
            class:"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700",
            to:"{prop.doi}",
            new_tab: true,
            h5 {
                class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
                "{prop.title}",
            },
            span { class: "text-lg text-gray-900 dark:text-white", "{prop.conference}" },
            p {
                class:"font-normal text-gray-700 dark:text-gray-400",
                "{prop.authors}",
            }
            p {
                class:"font-normal text-gray-700 dark:text-gray-400",
                "{prop.description}",
            }
        }
    }
}

fn Projects() -> Element {
    rsx! {
        Project {
                url: "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf",
                kind: "Bachelorproject",
                title: "Undisclosed Ethereum Smart Contract Fuzzer",
                authors: "Tuan-Dat Tran",
                description: "
                    In this ingoing project I am building an Ethereum
                    Smart Contract Fuzzer. More info will follow."
            },
    }
}

#[derive(Clone, PartialEq, Props)]
struct ProjectProp {
    #[props(default = "".to_string())]
    url: String,
    authors: String,
    title: String,
    kind: String,
    #[props(default = "".to_string())]
    description: String,
}

fn Project(prop: ProjectProp) -> Element {
    rsx! {
        Link {
            class:"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700",
            to:"{prop.url}",
            new_tab: true,
            h5 {
                class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
                "{prop.title}",
            },
            p { class: "text-lg text-gray-900 dark:text-white", "{prop.kind}" },
            p {
                class:"font-normal text-gray-700 dark:text-gray-400",
                "{prop.authors}",
            }
            p {
                class:"font-normal text-gray-700 dark:text-gray-400",
                "{prop.description}",
            }
        }
    }
}