library(muiMaterial)
library(shiny)

# https://mui.com/material-ui/react-button/#basic-button
BasicButtons <- Stack(
  gap = 2,
  Typography("Basic button", variant = "h5"),
  Typography(
    "The Button comes with three variants: text (default), contained, and outlined."
  ),
  Stack(
    spacing = 2,
    direction = "row",
    Button(variant = "text", "Text"),
    Button(variant = "contained", "Contained"),
    Button(variant = "outlined", "Outlined")
  )
)

# https://mui.com/material-ui/react-button/#text-button
TextButtons <- Stack(
  gap = 2,
  Typography("Text button", variant = "h5"),
  Typography(
    "Text buttons are typically used for less-pronounced actions,
             including those located: in dialogs, in cards. In cards, text buttons
             help maintain an emphasis on card content."
  ),
  Stack(
    spacing = 2,
    direction = "row",
    Button("Primary"),
    Button(disabled = TRUE, "Disabled"),
    Button(href = "#text-buttons", "Link")
  )
)

# https://mui.com/material-ui/react-button/#contained-button
ContainedButtons <- Stack(
  gap = 2,
  Typography("Contained button", variant = "h5"),
  Typography(
    "Contained buttons are high-emphasis, distinguished by their use of
             elevation and fill. They contain actions that are primary to your app."
  ),
  Stack(
    spacing = 2,
    direction = "row",
    Button(variant = "contained", "Contained"),
    Button(variant = "contained", disabled = TRUE, "Disabled"),
    Button(variant = "contained", href = "#contained-buttons", "Link")
  ),
  Typography("You can remove the elevation with the disableElevation prop."),
  Box(
    Button(
      variant = "contained",
      disableElevation = TRUE,
      "Disable elevation"
    )
  )
)

# https://mui.com/material-ui/react-button/#outlined-button
OutlinedButtons <- Stack(
  gap = 2,
  Typography("Outlined button", variant = "h5"),
  Typography(
    "Outlined buttons are medium-emphasis buttons. They contain actions
             that are important but aren't the primary action in an app."
  ),
  Typography(
    "Outlined buttons are also a lower emphasis alternative to contained
             buttons, or a higher emphasis alternative to text buttons."
  ),
  Stack(
    spacing = 2,
    direction = "row",
    Button(variant = "outlined", "Primary"),
    Button(variant = "outlined", disabled = TRUE, "Disabled"),
    Button(variant = "outlined", href = "#outlined-buttons", "Link")
  )
)

# https://mui.com/material-ui/react-button/#handling-clicks
ClicksButtons <- Stack(
  gap = 2,
  Typography("Handling clicks", variant = "h5"),
  Typography(
    "All components accept an onClick handler that is applied to the root DOM element."
  ),
  Stack(
    spacing = 2,
    direction = "row",
    Button(onClick = JS("() => { alert('clicked'); }"), "Click me")
  )
)

# https://mui.com/material-ui/react-button/#color
ColorButtons <- Stack(
  gap = 2,
  Typography("Color", variant = "h5"),
  Stack(
    spacing = 2,
    direction = "row",
    Button(color = "secondary", "Secondary"),
    Button(
      variant = "contained",
      color = "success",
      "Success"
    ),
    Button(
      variant = "outlined",
      color = "error",
      "Error"
    )
  ),
  Typography(
    "In addition to using the default button colors, you can add custom
             ones, or disable any you don't need. See the Adding new colors examples for more info."
  )
)

ui_Button <- muiMaterialPage(
  CssBaseline(),
  Box(
    sx = list(flexDirection = 'row', p = 1, gap = "500px"),
    BasicButtons,
    TextButtons,
    ContainedButtons,
    OutlinedButtons,
    ClicksButtons,
    ColorButtons
  )
)

server_Button <- function(input, output, session) {}

if (interactive()) {
  shinyApp(ui = ui_Button, server = server_Button)
}
