Confirm

namespace Rask.Site.Features.UiDocs.Examples;

// This tab's layout places Ui.Confirm once, so every .Confirm("…") on its pages asks in that dialog. heading: is
// this question's own title, and the question is the sentence beneath it.
public sealed partial class ConfirmExample : Component
{
    private string _project = "Rask";

    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-4")[
            Ui.Button.Danger.Id("uc-delete")
                .OnClick(() => _project = "")
                .Confirm("You're about to delete this project. This action cannot be reversed.", heading: "Delete project?")["Delete project"],
            Ui.Button.Ghost.Id("uc-restore").OnClick(() => _project = "Rask")["Restore"],
            Ui.Text.Id("uc-state")[_project.Length > 0 ? $"The {_project} project is still there." : "You deleted the project."]
        ];
}

namespace Rask.Site.Features.UiDocs.Examples;

// expect: shows a field in the dialog, and Yes waits until the answer is typed exactly, case and all.
public sealed partial class ConfirmExpectExample : Component
{
    private readonly List<string> _partners = ["Acme", "Globex", "Initech"];

    protected override Component? Render() =>
        Div.Class("space-y-3")[
            Ul.Class("max-w-sm divide-y divide-zinc-800/10 dark:divide-white/20")[
                _partners.Select(name => Li.Key(name).Class("flex items-center gap-2 py-2")[
                    Ui.Text.Class("grow")[name],
                    Ui.Button.Sm.Danger.Id($"uc-wipe-{name}")
                        .OnClick(() => _partners.Remove(name))
                        .Confirm($"Type {name} to delete it.", expect: name, heading: "Delete partner?")["Delete"]
                ])
            ],
            Ui.Text.Id("uc-left")[$"{_partners.Count} partners"]
        ];
}

namespace Rask.Site.Features.UiDocs.Examples;

// On a form, .Confirm asks before the submit, and the form is held only once Yes lets it go.
public sealed partial class ConfirmFormExample : Component
{
    private readonly Order _order = new();
    private string? _sent;

    protected override Component? Render() =>
        Div.Class("space-y-3")[
            Form.Model(_order).OnSubmit(Send).Id("uc-form").Class("flex flex-wrap items-end gap-4")
                .Confirm("The kitchen starts cooking as soon as it arrives.", heading: "Send the order?")[
                Ui.Input.Bind(() => _order.Dish).Label("Dish").Id("uc-dish").Class("max-w-xs"),
                Ui.Button.Primary.Submit.Id("uc-send")["Send order"]
            ],
            Ui.Text.Id("uc-sent")[_sent is null ? "Nothing sent yet." : "Sent: " + _sent]
        ];

    private void Send(Order order) => _sent = order.Dish;

    public sealed class Order
    {
        public string Dish { get; set; } = "Pancakes";
    }
}

namespace Rask.Site.Features.UiDocs.Examples;

// A layout of your own places the dialog once, in your words: the title a question without heading: gets, and
// the two buttons.
public sealed partial class ConfirmWordsExample : Component
{
    private int _companies = 3;

    protected override Component? Render() =>
    [
        Ui.Main.Class("flex min-h-dvh items-center justify-center")[
            Div.Class("flex flex-wrap items-center gap-4")[
                Ui.Button.Danger.Id("uc-words-delete")
                    .OnClick(() => _companies--)
                    .Confirm("Biztosan törli a céget?", heading: "Cég törlése")["Törlés"],
                Ui.Button.Id("uc-words-archive")
                    .OnClick(() => _companies--)
                    .Confirm("Archiválja a céget?")["Archiválás"],
                Ui.Text.Id("uc-words-left")[$"{_companies} cég"]
            ]
        ],
        Ui.Confirm.Heading("Megerősítés").No("Nem").Yes("Igen")
    ];
}