@page "/docs/components/radio-group"
@layout DocsContentLayout

@using LumexUI.Docs.Client.Pages.Components.RadioGroup.PreviewCodes

<DocsSection Title="Usage">
    <p>
        The radio group component groups multiple radio buttons,
        displaying related choices in a consistent manner.
    </p>
    <Usage />

    <DocsSection Title="Disabled">
        <p>
            You can disable a radio group to prevent user interaction.
            All radio buttons within the group are faded and do not respond to user clicks.
        </p>
        <Disabled />
    </DocsSection>

    <DocsSection Title="Read-Only">
        <p>
            You can set a radio group to be read-only, allowing the user to
            view the selected options without being able to modify them.
        </p>
        <ReadOnly />
    </DocsSection>

    <DocsSection Title="Orientation">
        <p>
            You can control how the radio buttons are laid out within the radio group. You can choose to
            display the radio buttons vertically (default) or horizontally.
        </p>
        <Orientation />
    </DocsSection>

    <DocsSection Title="Sizes">
        <p>
            The radio group component can control the size of the radio buttons within it to fit
            various layouts and design needs, from small radio groups to larger ones.
        </p>
        <Sizes />
    </DocsSection>

    <DocsSection Title="Colors">
        <p>
            Customize the appearance of the radio group by applying
            different colors that suit your application's theme and design.
        </p>
        <Colors />
    </DocsSection>

    <DocsSection Title="Label">
        <p>
            The radio group can include a label to provide context for the
            grouped radio buttons, making it clear what the set of options represents.
        </p>
        <Label />
    </DocsSection>

    <DocsSection Title="Description">
        <p>
            Add a description to the radio group to give users
            additional information about the grouped options.
        </p>
        <Description />
    </DocsSection>

    <DocsSection Title="Option Descriptions">
        <p>
            You can also display a description for each radio group option,
            guiding users to make the best choice.
        </p>
        <OptionDescriptions />
    </DocsSection>

    <DocsSection Title="Two-way Data Binding">
        <p>
            The radio group component supports two-way data binding, 
            allowing you to programmatically control toggled state. 
            You can achieve this using the <Code>@@bind-Value</Code> directive, 
            or the <Code>Value</Code> and <Code>ValueChanged</Code> parameters.
        </p>
        <TwoWayDataBinding />
    </DocsSection>
</DocsSection>

<DocsSection Title="Custom Styles">
    <DocsSlotsSection Title="Radio Group" Slots="@_radioGroupSlots">
        <ul>
            <li><Code>Class</Code>: The CSS class names to style the radio group wrapper.</li>
            <li><Code>Classes</Code>: The CSS class names to style the radio group slots.</li>
            <li><Code>RadioClasses</Code>: The CSS class names to style the radio group option slots.</li>
        </ul>
    </DocsSlotsSection>

    <DocsSlotsSection Title="Radio" Slots="@_radioSlots">
        <ul>
            <li><Code>Class</Code>: The CSS class names to style the radio button wrapper.</li>
            <li><Code>Classes</Code>: The CSS class names to style the radio button slots.</li>
        </ul>
    </DocsSlotsSection>

    <CustomStyles />
</DocsSection>

<DocsApiSection Components="@_apiComponents" />

@code {

    [CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;

    private readonly Heading[] _headings =
    [
        new("Usage", [
            new("Disabled"),
            new("Read-Only"),
            new("Orientation"),
            new("Sizes"),
            new("Colors"),
            new("Label"),
            new("Description"),
            new("Option Descriptions"),
            new("Two-way Data Binding")
        ]),
        new("Custom Styles", [
            new("Radio Group"),
            new("Radio")
        ]),
        new("API")
    ];

    private readonly Slot[] _radioGroupSlots =
    [
        new(nameof(RadioGroupSlots.Root), "The overall container of the radio group."),
        new(nameof(RadioGroupSlots.Wrapper), "The wrapper for the radio buttons within the group."),
        new(nameof(RadioGroupSlots.Label), "The label associated with the radio group."),
        new(nameof(RadioGroupSlots.Description), "The description of the radio group.")
    ];

    private readonly Slot[] _radioSlots =
    [
        new(nameof(RadioSlots.Root), "The main wrapper around the radio option."),
        new(nameof(RadioSlots.ControlWrapper), "The wrapper around the visual control (the actual radio button)."),
        new(nameof(RadioSlots.Control), "The radio button control (the visual circle)."),
        new(nameof(RadioSlots.LabelWrapper), "The wrapper around the label and description."),
        new(nameof(RadioSlots.Label), "The label associated with the radio option."),
        new(nameof(RadioSlots.Description), "The description of the radio option.")
    ];

    private readonly string[] _apiComponents =
    [
        nameof(LumexRadioGroup<T>),
        nameof(LumexRadio<T>)
    ];

    protected override void OnInitialized()
    {
        Layout.Initialize(
            title: "Radio Group",
            category: "Components",
            description: "The radio group allows users to select one option from a set.",
            headings: _headings,
            linksProps: new ComponentLinksProps("Radio", isServer: false)
        );
    }
}
