//! HTML views and components

use crate::files::{ALL_FILES, FileInfo, format_size};
use maud::{Markup, html};

mod icons;

/// Render a file row for the vendor files table
pub fn file_row(file: &FileInfo, base_url: &str) -> Markup {
    let size = format_size(file.size);
    let cdn_url = format!("<{}/{}", base_url, file.path);
    let download_url = format!("curl {}/{} > {}", base_url, file.path, file.name);

    html! {
        tr class="ba b--pink hover-bg-dark-gray" {
            td class="pa2 ba b--pink white-90" { (file.name) }
            td class="pa2 ba b--pink white-80" { (size) }
            td class="pa2 bl b--pink white-90" { code class="f5 white-90" { (cdn_url) } }
            td class="pa2  white-90" { (copy_button(&cdn_url)) }
            td class="pa2 bl b--pink white-90" { code class="f5 white-90" { (download_url) }  }
            td class="pa2 white-90" { (copy_button(&download_url)) }
        }
    }
}

/// Render the main index page
pub fn index_page(base_url: &str) -> Markup {
    html! {
        (maud::DOCTYPE)
        html lang="en" {
            head {
                meta charset="utf-8";
                meta name="viewport" content="width=device-width, initial-scale=1";
                title { "CDN of Silen" }
                link rel="stylesheet" href=("/tachyons.css");
                script src=("/the-fixi-project@0.1.1.min.js") { }
                style { "body { font-family: 'Courier New', Courier, monospace; }" }
            }
            body class="ma0 pa0 min-vh-100 bg-black white" {
                (header())
                main class="pa4" {
                    (files_section(base_url))
                }
            }
        }
    }
}

pub fn copy_button(content: &str) -> Markup {
    html! {
    button
        class="f5 link dim ph2 pv1 mb2 dib white bg-pink hover-bg-light-pink"
        onclick=(format!("navigator.clipboard.writeText('{}')", content.replace("'", "\\'"))){
            (icons::copy_icon())
        }
    }
}

/// Render the header
fn header() -> Markup {
    html! {
        header class="bg-dark-pink" {
            div class="pa3" {
                h1 class="f2 fw7 lh-solid tracked-tight ma0 white-90" {
                    "CDN"
                }
                p class="f4 fw4 lh-copy mt1 mb0 white-80" {
                    "Static CDN for my static files"
                }
            }
        }
    }
}

/// Render the files section
fn files_section(base_url: &str) -> Markup {
    html! {
        section class="mb5 white-90" {
            h2 class="f3 fw6 mb3 white-90" { "Files" }
            p class="mb3 white-80" { "Pre-built JavaScript, CSS files and markdown" }

            div class="overflow-auto" {
                table class="collapse" {
                    thead {
                        tr class="bb b--pink" {
                            th class="pa2 tl f5 fw6 white-90" { "File" }
                            th class="pa2 tl f5 fw6 white-90" { "Size" }
                            th class="pa2 tl f5 fw6 white-90" { "CDN URL" }
                            th class="pa2 tl f5 fw6 white-90" { "" }
                            th class="pa2 tl f5 fw6 white-90" { "Download" }
                            th class="pa2 tl f5 fw6 white-90" { "" }
                        }
                    }
                    tbody {
                        @for file in ALL_FILES {
                            (file_row(file, base_url))
                        }
                    }
                }
            }
        }
    }
}