import { assign, fun, id, str } from "@hylimo/core";
import {
    createToolboxEditExpression,
    PREDICTION_STYLE_CLASS_ASSIGNMENT_EXPRESSION,
    SCOPE
} from "../../../base/dslModule.js";
import { ContentModule } from "../contentModule.js";
import { connectionEditFragments } from "../base/canvasConnection.js";
import { stringOrSpanListType } from "../../../base/types.js";

/**
 * Module providing the comment element
 */
export const commentModule = ContentModule.create(
    "uml/comment",
    ["uml/associations"],
    [],
    [
        assign(
            "_comment",
            fun(
                `
                    this.textContent = it
                    if(isString(textContent)) {
                        textContent = list(span(text = textContent))
                    }
                    commentElement = canvasElement(
                        contents = list(
                            path(path = "M0 0 H 1", vAlign = "top", class = list("comment-top")),
                            path(path = "M0 0 H 1", vAlign = "bottom"),
                            path(path = "M0 0 V 1", hAlign = "left"),
                            path(path = "M0 0 V 1", hAlign = "right", class = list("comment-right")),
                            container(
                                contents = list(
                                    path(
                                        path = "M 0 0 V 1 H 1 Z",
                                        hAlign = "right",
                                        vAlign = "top",
                                        class = list("comment-triangle")
                                    ),
                                    text(contents = textContent, class = list("comment"))
                                )
                            )
                        ),
                        class = list("comment-element")
                    )
                    commentElement
                `
            )
        ),
        id(SCOPE).assignField(
            "comment",
            fun(
                `
                    (content) = args
                    scope.internal.registerCanvasElement(
                        _comment(content, self = args.self),
                        args,
                        args.self
                    )
                `,
                {
                    docs: "Creates a comment.",
                    params: [[0, "the content of the comment", stringOrSpanListType]],
                    snippet: `("$1")`,
                    returns: "The created comment"
                }
            )
        ),
        `
            scope.styles {
                cls("comment-element") {
                    vAlign = "center"
                    hAlign = "center"
                    minWidth = 80
                    maxWidth = 300

                    vars {
                        commentTriangleSize = 20
                    }

                    cls("comment") {
                        marginRight = 5
                        marginLeft = 5
                        marginBottom = 5
                    }
                    cls("comment-right") {
                        marginTop = var("commentTriangleSize")
                    }
                    cls("comment-top") {
                        marginRight = var("commentTriangleSize")
                    }
                    cls("comment-triangle") {
                        width = var("commentTriangleSize")
                        height = var("commentTriangleSize")
                    }
                    type("path") {
                        stroke = var("primary")
                        strokeWidth = var("strokeWidth")
                    }
                    type("container") {
                        layout = "vbox"
                    }
                }
            }
        `,
        createToolboxEditExpression("Comment/Comment", 'comment("Example comment")'),
        id(SCOPE)
            .field("internal")
            .field("canvasAddEdits")
            .assignField("connection/comment", str(generateCommentConnectionEdit()))
    ]
);

/**
 * Generates the create connection edit for comments
 * Creates a comment with a connection to the start element
 *
 * @returns the generated connection edit
 */
function generateCommentConnectionEdit(): string {
    const start = connectionEditFragments("start");
    return [
        `'comment("Example comment")'`,
        PREDICTION_STYLE_CLASS_ASSIGNMENT_EXPRESSION,
        `'layout{\n    pos = apos('`,
        "end.x & ', ' & end.y",
        "')\n} -- '",
        start.startExpression,
        "' with {\n    over = start('",
        "((end.x - start.x) > 0 ? 0.5 : 0)",
        "').line(end('",
        start.posExpression,
        "'))\n}'",
        PREDICTION_STYLE_CLASS_ASSIGNMENT_EXPRESSION
    ].join("&");
}