"""
Creates a <span> that contains a checkbox with a label that has a content and another that is a number of rectangle
characters (▉) equal to the content. A clickable spoiler/hidden text can be made with these when correctly styled.

Usage:
||unique_id||content||
"""
from html import unescape
from marko import inline
from marko.helpers import MarkoExtension


class SpoilerElement(inline.InlineElement):
    pattern = '\\|\\|(.*)\\|\\|(.*)\\|\\|'
    parse_children = True
    parse_group = 2
    priority = 7

    def __init__(self, match):
        self.id = match.group(1)
        self.children = match.group(2)



class SpoilerRenderer:
    def render_spoiler_element(self, element: SpoilerElement):
        content = self.render_children(element)
        return f'<span><input type="checkbox" class="spoiler" id="{element.id}"><label class="spoiler-on" for="{element.id}"><span>{"".join(["▉" if char != " " else " " for char in unescape(content)])}</span></label><label class="spoiler-off" for="{element.id}"><span>{content}</span></label></span>'


Spoiler = MarkoExtension(
    elements=[SpoilerElement],
    renderer_mixins=[SpoilerRenderer]
)