chilp

-module(chilp@widget).
-compile([no_auto_import, nowarn_unused_vars, nowarn_unused_function, nowarn_nomatch, inline]).
-define(FILEPATH, "src/chilp/widget.gleam").
-export([element/3, register/0]).
-export_type([wrapping_model/0, msg/0]).

-type wrapping_model() :: {wrapping_model_set,
        chilp@widget@base:chilp_data_in_your_model(msg()),
        boolean(),
        chilp@widget@base:comment_widget(msg())} |
    {wrapping_model_unset,
        chilp@widget@base:chilp_data_in_your_model(msg()),
        boolean()}.

-type msg() :: {post_changed, binary(), binary()} |
    {chilp_msg_wrapper, chilp@widget@base:chilp_msg()}.

-file("src/chilp/widget.gleam", 31).
-spec element(binary(), binary(), boolean()) -> lustre@vdom@vnode:element(any()).
element(Instance, Post, Styles) ->
    lustre@element:element(
        <<"comment-widget"/utf8>>,
        [lustre@attribute:attribute(
                <<"postpointer"/utf8>>,
                <<<<Instance/binary, ":"/utf8>>/binary, Post/binary>>
            ),
            lustre@attribute:attribute(
                <<"styles-enabled"/utf8>>,
                begin
                    _pipe = Styles,
                    gleam@bool:to_string(_pipe)
                end
            )],
        []
    ).

-file("src/chilp/widget.gleam", 60).
-spec init(any()) -> {wrapping_model(), lustre@effect:effect(msg())}.
init(_) ->
    {{wrapping_model_unset,
            chilp@widget@base:init(
                fun(Field@0) -> {chilp_msg_wrapper, Field@0} end
            ),
            true},
        lustre@effect:none()}.

-file("src/chilp/widget.gleam", 96).
-spec js_browse(binary()) -> nil.
js_browse(_) ->
    nil.

-file("src/chilp/widget.gleam", 353).
-spec browse(binary()) -> lustre@effect:effect(any()).
browse(To) ->
    lustre@effect:from(fun(_) -> js_browse(To) end).

-file("src/chilp/widget.gleam", 71).
-spec update(wrapping_model(), msg()) -> {wrapping_model(),
    lustre@effect:effect(msg())}.
update(Model, Msg) ->
    case Msg of
        {post_changed, Instance, Post} ->
            Chilp_model = erlang:element(2, Model),
            Widget = chilp@widget@base:new(Instance, Post, Chilp_model),
            {{wrapping_model_set, Chilp_model, erlang:element(3, Model), Widget},
                chilp@widget@base:force(Widget, Chilp_model)};

        {chilp_msg_wrapper, Message} ->
            {Chilp_model@1, Effects} = chilp@widget@base:update(
                Message,
                erlang:element(2, Model),
                fun browse/1
            ),
            New_model = case Model of
                {wrapping_model_set, _, Styles, Widget@1} ->
                    {wrapping_model_set, Chilp_model@1, Styles, Widget@1};

                {wrapping_model_unset, _, Styles@1} ->
                    {wrapping_model_unset, Chilp_model@1, Styles@1}
            end,
            {New_model, Effects}
    end.

-file("src/chilp/widget.gleam", 360).
-spec view(wrapping_model()) -> lustre@vdom@vnode:element(msg()).
view(Model) ->
    case Model of
        {wrapping_model_set, Chilp_model, true, Widget} ->
            lustre@element@html:'div'(
                [lustre@attribute:class(<<"chilp-widget-component"/utf8>>)],
                [lustre@element@html:style(
                        [],
                        <<".chilp-widget {
    --highlight: #595aff;
    transition: all 0.5s ease;
    overflow: hidden;
    ::selection {
        background-color: rgba(89, 90, 255, 0.2);
        color: var(--highlight);
    }

    .widget::-webkit-scrollbar {
        width: 6px;
    }
    .widget::-webkit-scrollbar-thumb {
        background-color: #e2e8f0;
        border-radius: 10px;
    }

    .widget {
        max-width: 600px;
        margin: 2rem auto;
        background-color: floralwhite;
        font-family: sans-serif;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .widget > .btn-get-comments {
        display: block;
        width: 100%;
        max-width: 200px;
        margin: 2rem auto 0 auto;
        padding: 12px 24px;
        background-color: transparent;
        color: #595aff;
        border: 2px solid #595aff;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .widget > .btn-get-comments:hover {
        background-color: #595aff;
        color: white;
        box-shadow: 0 4px 12px rgba(89, 90, 255, 0.3);
        transform: translateY(-1px);
    }

    h1.widget-header {
        font-size: 1.75rem;
        font-weight: 800;
        color: #1a202c;
        margin: 0 0 0.5rem 0;
        letter-spacing: -0.025em;
    }

    .subheader {
        font-size: 0.95rem;
        color: #718096;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .post-link {
        color: #595aff;
        text-decoration: none;
        font-weight: 500;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s;
    }

    .post-link:hover {
        border-bottom-color: #595aff;
    }

    .or-create-an-account-disclaimer {
        font-size: 0.73rem;
        color: #a0aec0;
        margin: -4px 0 12px 2px;
        font-style: italic;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .go-reply-form {
        display: flex;
        gap: 0;
        border-bottom: 1px solid #edf2f7;
        padding-bottom: 1.5rem;
        margin-bottom: 2rem;
        max-width: 500px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    .go-reply-form-input {
        flex: 1;
        padding: 10px 15px;
        border: 2px solid #e2e8f0;
        flex: 1;
        border-right: none;
        border-radius: 8px 0 0 8px;
        font-size: 0.95rem;
        outline: none;
        transition: border-color 0.2s;
    }

    .go-reply-form-input:focus {
        border-color: var(--highlight);
    }

    .go-reply-form-input::placeholder {
        color: #a0aec0;
    }
    .input-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 6px;
    }

    .go-reply-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #4a5568;
        letter-spacing: 0.05em;
        margin-left: 2px;
    }

    .form-controls {
        display: flex;
        width: 100%;
    }

    .go-reply-form-button {
        padding: 10px 20px;
        border: 2px solid var(--highlight);
        border-radius: 0 8px 8px 0;
        background-color: var(--highlight);
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .go-reply-form-button:hover {
        background-color: var(--highlight);
        border-color: var(--highlight);
    }

    @media (max-width: 480px) {
        .go-reply-form {
            flex-direction: column;
            gap: 8px;
        }
        .go-reply-form-input,
        .go-reply-form-button {
            border-radius: 8px;
            border: 2px solid #e2e8f0;
        }
    }

    .comment-widget form {
        display: flex;
        gap: 10px;
        margin-bottom: 1.5rem;
    }

    .comment-widget input[name=\"userinstance\"] {
        flex-grow: 1;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .comment {
        border-left: 2px solid #eee;
        padding-left: 1rem;
        margin-top: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    .comment header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    .comment .avatar {
        width: 36px;
        height: 36px;
        border-radius: 4px;
        object-fit: cover;
        background: #eee;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .comment .display-name {
        font-weight: bold;
        display: block;
    }

    .comment time {
        font-size: 0.85rem;
        color: #666;
    }

    .comment .content {
        line-height: 1.5;
    }

    .comment .content p {
        margin: 0.5rem 0;
    }

    .comment .mention {
        color: var(--highlight);
        text-decoration: none;
    }

    .comment footer {
        margin-top: 8px;
    }

    .comment footer a {
        font-size: 0.8rem;
        color: #888;
        text-decoration: none;
    }

    .comment footer a:hover {
        text-decoration: underline;
    }

    .comment .comment {
        margin-left: 10px;
        border-left: 2px solid #ddd;
    }

    .error {
        color: red;
        font-size: smaller;
    }
}
"/utf8>>
                    ),
                    chilp@widget@base:show(Widget, Chilp_model)]
            );

        {wrapping_model_set, Chilp_model@1, false, Widget@1} ->
            lustre@element@html:'div'(
                [lustre@attribute:class(<<"chilp-widget-component"/utf8>>)],
                [chilp@widget@base:show(Widget@1, Chilp_model@1)]
            );

        {wrapping_model_unset, _, _} ->
            lustre@element:none()
    end.

-file("src/chilp/widget.gleam", 16).
-spec register() -> {ok, nil} | {error, lustre:error()}.
register() ->
    Component = lustre:component(
        fun init/1,
        fun update/2,
        fun view/1,
        [lustre@component:on_attribute_change(
                <<"postpointer"/utf8>>,
                fun(Value) -> _pipe = Value,
                    _pipe@1 = gleam@string:split_once(_pipe, <<":"/utf8>>),
                    gleam@result:map(
                        _pipe@1,
                        fun(A) ->
                            {post_changed,
                                erlang:element(1, A),
                                erlang:element(2, A)}
                        end
                    ) end
            )]
    ),
    lustre:register(Component, <<"comment-widget"/utf8>>).