## ----setup, include=FALSE-----------------------------------------------------
library(teal)

## ----app----------------------------------------------------------------------
library(teal)

app <- init(
  data = teal_data(IRIS = iris, MTCARS = mtcars),
  modules = modules(
    example_module("Module 1"),
    example_module("Module 2")
  ),
  filter = teal_slices(
    teal_slice(dataname = "IRIS", varname = "Species", selected = "setosa")
  )
) |>
  modify_title("My first teal application") |>
  modify_header(h3("My first teal application")) |>
  modify_footer(tags$div(a("Powered by teal", href = "https://insightsengineering.github.io/teal/latest-tag/")))

if (interactive()) {
  shinyApp(app$ui, app$server)
}

## ----appintro, message=FALSE, warning=FALSE, include=FALSE--------------------
library(teal)
library(shiny)

app <- init(
  data = teal_data(IRIS = iris, MTCARS = mtcars),
  modules = modules(
    example_module("Module 1"),
    example_module("Module 2")
  ),
  filter = teal_slices(
    teal_slice(dataname = "IRIS", varname = "Species", selected = "virginica")
  )
) |>
  modify_title("My first teal application") |>
  modify_header(tags$div(
    tags$head(
      tags$link(
        rel = "stylesheet",
        href = "https://unpkg.com/intro.js/introjs.css"
      ),
      tags$style(HTML("
      .introjs-tooltip {
        background-color: white !important;
        border: 1px solid #ccc !important;
        border-radius: 5px !important;
        padding: 15px !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
        min-width: 250px !important;
        max-width: 400px !important;
      }

      .introjs-tooltip {
        z-index: 10000000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
      }
      .introjs-overlay {
        z-index: 9999999 !important;
        opacity: 0.8 !important;
      }
      .introjs-helperLayer {
        z-index: 9999998 !important;
      }
      .introjs-tooltipbuttons {
        display: block !important;
      }
      .introjs-button {
        display: inline-block !important;
      }
    ")),
      tags$script(
        src = "https://unpkg.com/intro.js/intro.js"
      ),
      # nolint start line_length_linter.
      tags$script(HTML('
      $(document).on("shiny:connected", function() {
        setTimeout(function() {
          console.log("Starting intro.js tour");
          introJs.tour().setOptions({
            steps: [
              {
                intro: "Welcome! This short tour will walk you through the key features of this teal application. Click Next to get started."
              },
              {
                element: "#teal-header",
                intro: "This is the title of your teal application."
              },
              {
                element: ".teal.dropdown-button",
                intro: "Use this dropdown to switch between available analysis modules."
              },
              {
                element: "#teal-teal_modules-nav-module_1-wrapper > div:first-child > div:first-child",
                intro: "This breadcrumb shows your current location in the app and which analysis module is active."
              },
              {
                element: "#teal-teal_modules-nav-module_1-data_summary_accordion",
                intro: "The Active Data Summary gives you an overview of the datasets currently loaded in the application."
              },
              {
                element: "#teal-teal_modules-nav-module_1-filter_panel-filters-main_filter_accordion",
                intro: "Use the Filter Data area to subset your datasets and refine the data used by each analysis.<br><br><ul><li>Click the <b>+</b> button to add a new column to filter on.</li><li>Select which values to include or exclude from the dataset.</li><li>Click the <b>x</b> button next to a filter to remove it from the dataset.</li></ul>"
              },
              {
                element: "#teal-teal_modules-nav-module_1-teal_module_ui > div.container-fluid.teal-widgets.standard-layout-wrapper > div > div > aside.sidebar",
                intro: "Input parameters for the active analysis are displayed here. Adjust them to update the output."
              },
              {
                element: "#teal-teal_modules-nav-module_1-teal_module_ui > div.container-fluid.teal-widgets.standard-layout-wrapper > div > div > div.main",
                intro: "Plots, tables, and statistics generated by the active analysis are displayed in this area."
              },
              {
                element: "#teal-teal_modules-nav-module_1-add_reporter_wrapper-report_add_wrapper",
                intro: "Happy with the current analysis? Click Add to Report to save it for later export."
              },
              {
                element: "#teal-reporter_menu_container",
                intro: "Open the Report menu to view, edit, organize, and export all analyses you have added to your report."
              },
              {
                element: "#teal-teal_modules-nav-module_1-source_code_wrapper-source_code-button",
                intro: "Click Show R Code to view the underlying R code that generated the current analysis output."
              },
              {
                element: "#teal-snapshot_manager_panel-show_snapshot_manager > span.icon",
                intro: "Use the Snapshot Manager to save your current inputs and settings so you can easily recreate this analysis later."
              },
              {
                element: "#teal-filter_manager_panel-show_filter_manager > span.icon",
                intro: "The Filter Manager shows a matrix of all active filters and which modules each filter is applied to."
              },
              {
                element: "#teal-footer-session_info-sessionInfo-button",
                intro: "Click Session Info to view details about the current R version and loaded packages."
              },
              {
                element: "#teal-footer-session_info-identifier",
                intro: "This app identifier helps support teams locate and diagnose this specific instance of the application.",
              },
              {
                intro: "That\'s the end of the tour! If anything was unclear, feel free to reach out for help.",
                dontShowAgain: true
              },
            ],
            showProgress: true,
            showBullets: false,
            exitOnOverlayClick: false,
            doneLabel: "Done",
            nextLabel: "Next →",
            prevLabel: "← Back"
          }).start();
        }, 2000);
      });
    '))
    ),
    # nolint end.
    h3("My first teal application")
  )) |>
  modify_footer(tags$div(a("Powered by teal", href = "https://insightsengineering.github.io/teal/latest-tag/")))

if (interactive()) {
  shinyApp(app$ui, app$server)
}

## ----shinylive_iframe, echo = FALSE, out.width = '150%', out.extra = 'style = "position: relative; z-index:1"', eval = requireNamespace("roxy.shinylive", quietly = TRUE) && knitr::is_html_output() && identical(Sys.getenv("IN_PKGDOWN"), "true")----
# code <- paste0(c(
#   "interactive <- function() TRUE",
#   knitr::knit_code$get("appintro")
# ), collapse = "\n")
# url <- roxy.shinylive::create_shinylive_url(code)
# knitr::include_url(url, height = "800px")