import glink/app.{type App}
import glink/instance.{type Instance}
import glink/static
import glink/style.{type Style}
import glink/text
import glink/use_focus
import glink/use_focus_manager
import glink/use_input
import glink/use_stderr
import glink/use_stdin
import glink/use_stdout
import redraw.{type Component}
import redraw/dom/attribute.{type Attribute}

/// `<Box>` is an essential Ink component to build your layout. It's like `<div style="display: flex">` in the browser.
@external(javascript, "./glink.ffi.mjs", "box")
pub fn box(
  styles styles: List(Style),
  attributes attrs: List(Attribute),
  children children: List(Component),
) -> Component

// Adds one or more newline (\n) characters. Must be used within <Text> components.
@external(javascript, "./glink.ffi.mjs", "newline")
pub fn newline(count: Int) -> Component

/// A flexible space that expands along the major axis of its containing layout.
/// It's useful as a shortcut for filling all the available spaces between elements.
@external(javascript, "./glink.ffi.mjs", "spacer")
pub fn spacer() -> Component

/// `<Static>` component permanently renders its output above everything else.
/// It's useful for displaying activity like completed tasks or logs - things that
/// are not changing after they're rendered (hence the name "Static").
///
/// It's preferred to use `<Static>` for use cases like these, when you can't know
/// or control the amount of items that need to be rendered.
///
/// For example, [Tap](https://github.com/tapjs/node-tap) uses `<Static>` to display
/// a list of completed tests. [Gatsby](https://github.com/gatsbyjs/gatsby) uses it
/// to display a list of generated pages, while still displaying a live progress bar.
@external(javascript, "./glink.ffi.mjs", "static_")
pub fn static(props: List(static.Prop), children: List(Component)) -> Component

/// This component can display text, and change its style to make it colorful, bold, underline, italic or strikethrough.
@external(javascript, "./glink.ffi.mjs", "text")
pub fn text(props: List(text.Prop), children: List(Component)) -> Component

/// Function which transforms children output. It accepts children and must return transformed children too.
pub type Transform =
  fn(String, Int) -> String

/// Transform a string representation of React components before they are written to output.
/// For example, you might want to apply a gradient to text, add a clickable link or create some text effects.
/// These use cases can't accept React nodes as input, they are expecting a string.
/// That's what <Transform> component does, it gives you an output string of its child components and lets you transform it in any way.
@external(javascript, "./glink.ffi.mjs", "transform")
pub fn transform(transform: Transform, children: List(Component)) -> Component

pub type Size {
  Size(
    /// Element width.
    width: Float,
    /// Element height.
    height: Float,
  )
}

/// Measure the dimensions of a particular `<Box>` element.
@external(javascript, "./glink.ffi.mjs", "measure_element")
pub fn measure_element(node: node) -> Size

/// Mount a component and render the output.
@external(javascript, "./glink.ffi.mjs", "render")
pub fn render(component: Component) -> Instance

/// `use_app` is a React hook, which exposes a method to manually exit the app (unmount).
@external(javascript, "./glink.ffi.mjs", "use_app")
pub fn use_app() -> App

/// Component that uses `use_focus` hook becomes "focusable" to Ink,
/// so when user presses <kbd>Tab</kbd>, Ink will switch focus to this component.
/// If there are multiple components that execute `use_focus` hook, focus will be
/// given to them in the order that these components are rendered in.
/// This hook returns an object with `is_focused` boolean property, which
/// determines if this component is focused or not.
@external(javascript, "./glink.ffi.mjs", "use_focus")
pub fn use_focus(props: List(use_focus.Input)) -> use_focus.Output

/// This hook exposes methods to enable or disable focus management for all
/// components or manually switch focus to next or previous components.
@external(javascript, "./glink.ffi.mjs", "use_focus_manager")
pub fn use_focus_manager() -> use_focus_manager.Output

/// This hook is used for handling user input.
/// It's a more convenient alternative to using `StdinContext` and listening to `data` events.
/// The callback you pass to `use_input` is called for each character when user enters any input.
/// However, if user pastes text and it's more than one character, the callback will be called only once and the whole string will be passed as `input`.
///
/// ## Example
///
/// ```gleam
/// import glink
/// import glink/use_input
/// import redraw
///
/// pub fn user_input() {
///   use <- redraw.component__("UserInput")
///
///   glink.use_input(
///     fn(input, key) {
///       case input, key {
///         "q", _ -> todo as "Exit program"
///         _, use_input.Key(left_arrow: True, ..) ->
///           todo as "Left arrow key pressed"
///         _, _ -> Nil
///       }
///     },
///     [],
///   )
///
///   redraw.fragment([])
/// }
/// ```
@external(javascript, "./glink.ffi.mjs", "use_input")
pub fn use_input(
  handler: use_input.Handler,
  options: List(use_input.Option),
) -> Nil

/// `use_stdin` is a React hook, which exposes stdin stream.
@external(javascript, "./glink.ffi.mjs", "use_stdin")
pub fn use_stdin() -> use_stdin.Stdin

/// `use_stderr` is a React hook, which exposes stderr stream.
@external(javascript, "./glink.ffi.mjs", "use_stderr")
pub fn use_stderr() -> use_stderr.Stderr

/// `use_stdout` is a React hook, which exposes stdout stream.
@external(javascript, "./glink.ffi.mjs", "use_stdout")
pub fn use_stdout() -> use_stdout.Stdout