import reflex as rx

MARKDOWN_CONTENT = """
# Code

```python
def hello_world():
    print("Hello, world!")
```

Or use some `inline` code.

```javascript
import {h} from 'hastscript'
import {visit} from 'unist-util-visit'

// This plugin is an example to turn `::note` into divs,
// passing arbitrary attributes.
function myRemarkPlugin() {
  /**
   * @param {Root} tree
   *   Tree.
   * @returns {undefined}
   *   Nothing.
   */
  return (tree) => {
    visit(tree, (node) => {
      if (
        node.type === 'containerDirective' ||
        node.type === 'leafDirective' ||
        node.type === 'textDirective'
      ) {
        if (node.name !== 'note') return

        const data = node.data || (node.data = {})
        const tagName = node.type === 'textDirective' ? 'span' : 'div'

        data.hName = tagName
        data.hProperties = h(tagName, node.attributes || {}).properties
      }
    })
  }
}
```

```
No language specified, just a pre block.
```

# Math

This is money: something like the pricing tiers are $100, $1K and $10K

# HTML

<b>This is HTML</b>

# GFM

## Autolink literals

www.example.com, https://example.com, and [email protected].

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

# remark-github

## References
*   Commit: f8083175fe890cbf14f41d0a06e7aa35d4989587
*   Commit (fork): foo@f8083175fe890cbf14f41d0a06e7aa35d4989587
*   Commit (repo): remarkjs/remark@e1aa9f6c02de18b9459b7d269712bcb50183ce89
*   Issue or PR (`#`): #1
*   Issue or PR (`GH-`): GH-1
*   Issue or PR (fork): foo#1
*   Issue or PR (project): remarkjs/remark#1
*   Mention: @wooorm

## Links
*   Commit: <https://github.com/remarkjs/remark/commit/e1aa9f6c02de18b9459b7d269712bcb50183ce89>
*   Commit comment: <https://github.com/remarkjs/remark/commit/ac63bc3abacf14cf08ca5e2d8f1f8e88a7b9015c#commitcomment-16372693>
*   Issue or PR: <https://github.com/remarkjs/remark/issues/182>
*   Issue or PR comment: <https://github.com/remarkjs/remark-github/issues/3#issue-151160339>
*   Mention: <https://github.com/ben-eb>
"""


class State(rx.State):
    use_math: bool = True
    use_gfm: bool = True
    use_unwrap_images: bool = True
    use_katex: bool = True
    use_raw: bool = True
    use_github: bool = True


def custom_codeblock(value, **props):
    return rx.box(
        rx.text("Custom Codeblock:"),
        rx._x.code_block(value, **props),
        # rx.el.pre(value),
        rx.text(f"Language: {rx.cond(language := props.get('language'), language, 'N/A')}"),
        padding="10px",
        border="2px solid blue",
        margin_y="10px",
    )


def index() -> rx.Component:
    return rx.container(
        rx.color_mode.button(position="top-right"),
        rx.hstack(
            rx.box(
                rx.markdown(
                    MARKDOWN_CONTENT,
                    use_math=State.use_math,
                    use_gfm=State.use_gfm,
                    use_unwrap_images=State.use_unwrap_images,
                    use_katex=State.use_katex,
                    use_raw=State.use_raw,
                    remark_plugins=rx.cond(
                        State.use_github,
                        [
                            (
                                rx.markdown.plugin("[email protected]", "remarkGithub"),
                                {"repository": "remarkjs/remark"},
                            ),
                        ],
                        [],
                    ),
                    # component_map={
                    #     "pre": custom_codeblock,
                    # },
                ),
                overflow_x="auto",
            ),
            rx.spacer(),
            rx.vstack(
                rx.hstack(
                    rx.text("Use Math"),
                    rx.switch(
                        checked=State.use_math,
                        on_change=State.set_use_math,
                    ),
                ),
                rx.hstack(
                    rx.text("Use GFM"),
                    rx.switch(
                        checked=State.use_gfm,
                        on_change=State.set_use_gfm,
                    ),
                ),
                rx.hstack(
                    rx.text("Use Unwrap Images"),
                    rx.switch(
                        checked=State.use_unwrap_images,
                        on_change=State.set_use_unwrap_images,
                    ),
                ),
                rx.hstack(
                    rx.text("Use KaTeX"),
                    rx.switch(
                        checked=State.use_katex,
                        on_change=State.set_use_katex,
                    ),
                ),
                rx.hstack(
                    rx.text("Use Raw"),
                    rx.switch(
                        checked=State.use_raw,
                        on_change=State.set_use_raw,
                    ),
                ),
                rx.hstack(
                    rx.text("Use GitHub"),
                    rx.switch(
                        checked=State.use_github,
                        on_change=State.set_use_github,
                    ),
                ),
                top="25px",
                position="sticky",
                align="end",
                min_width="200px",
            ),
        ),
        rx.logo(),
    )


app = rx.App()
app.add_page(index)