@page "/components/textarea"

<PageTitle>Textarea — Lumeo</PageTitle>

<PageHeader Title="Textarea" Description="Displays a form textarea for multi-line text input." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Multi-line text input for comments, descriptions, or messages</li>
        <li>Bio or "about" fields in profile and settings forms</li>
        <li>Code or JSON input fields that benefit from multiple visible rows</li>
        <li>Any form field where the expected input spans more than one line</li>
    </ul>
</div>

<div class="mt-6">
    <Alert Variant="Alert.AlertVariant.Info" ShowIcon="true">
        <ChildContent>
            For validation, label, and helper text, wrap this input in <code class="font-mono text-xs">&lt;FormField&gt;</code>.
            See <a href="/components/form#validation-pattern" class="underline font-medium">Form &rsaquo; Validation Pattern</a>.
        </ChildContent>
    </Alert>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Textarea placeholder="Type your message here." />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Binding" Code="@_bindingCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Textarea Value="@_text" OnInput="@(e => _text = e.Value?.ToString() ?? "")" placeholder="Write something..." />
            <Lumeo.Text Size="sm" Color="muted">Character count: @_text.Length</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Textarea placeholder="This textarea is disabled." disabled />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Label" Code="@_labelCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <FormField Label="Your Bio" HelpText="You can use markdown for formatting.">
                <Textarea placeholder="Tell us a little bit about yourself." rows="4" />
            </FormField>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Custom Rows" Code="@_rowsCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Textarea placeholder="This textarea has 6 rows." rows="6" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Auto Resize" Code="@_autoResizeCode">
        <Stack Gap="3" Class="w-full max-w-sm">
            <Textarea Placeholder="Start typing... the textarea will grow automatically" AutoResize="true" />
            <Textarea Placeholder="Limited to 5 rows max" AutoResize="true" MaxRows="5" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Character Counter — interactive" Description="Toggle ShowCount on to see the in-field counter. MaxLength caps the input at 200 characters." Code="@_showCountCode">
        <Stack Gap="3" Class="w-full max-w-sm">
            <Flex Align="center" Gap="3">
                <Switch @bind-Checked="_textareaShowCount" />
                <Lumeo.Text Size="sm">Show character counter</Lumeo.Text>
            </Flex>
            <Textarea @bind-Value="_textareaCountValue" ShowCount="@_textareaShowCount" MaxLength="200" Placeholder="Type to see the counter…" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Resize — interactive preview" Code="@_resizeInteractiveCode">
        <Stack Gap="4" Class="w-full max-w-sm">
            <Lumeo.Text Size="sm" Color="muted">Pick a Resize value to control where the drag handle appears.</Lumeo.Text>
            <Segmented @bind-Value="_previewResize">
                <SegmentedItem Value="Vertical">Vertical</SegmentedItem>
                <SegmentedItem Value="Horizontal">Horizontal</SegmentedItem>
                <SegmentedItem Value="Both">Both</SegmentedItem>
                <SegmentedItem Value="None">None</SegmentedItem>
            </Segmented>
            <Textarea Resize="_textareaResizeEnum"
                      Placeholder="@($"Resize = {_previewResize} — drag the handle")"
                      rows="4" />
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="textarea" Level="3" Class="mt-8 scroll-mt-20">Textarea</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Value</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The current value of the textarea.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OnInput</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;ChangeEventArgs&gt;</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Callback invoked on every keystroke as the value changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Disabled</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Disables the textarea.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AutoResize</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Automatically resize the textarea based on content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">MaxRows</TableCell><TableCell Class="font-mono text-xs">int</TableCell><TableCell Class="font-mono text-xs">10</TableCell><TableCell>Maximum number of rows when auto-resizing.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ValueChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;string?&gt;</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Two-way binding callback; fires when the value changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Resize</TableCell><TableCell Class="font-mono text-xs">TextareaResize</TableCell><TableCell Class="font-mono text-xs">Vertical</TableCell><TableCell>Controls the CSS resize handle. Values: None, Vertical, Horizontal, Both.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">MaxLength</TableCell><TableCell Class="font-mono text-xs">int?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Maximum number of characters allowed.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ShowCount</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Displays an in-field character counter (uses MaxLength when provided).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes (e.g. placeholder, rows).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Label</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Visible label rendered above the textarea.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">HelperText</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Helper text shown beneath the textarea when valid.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ErrorText</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Error message shown beneath the textarea when invalid.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Invalid</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Marks the textarea as invalid and shows the error styling.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Required</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Marks the textarea as required for form submission.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Name</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>HTML name attribute used by native form submission.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/input" class="text-primary hover:underline">Input</a> — Single-line text input for shorter values</li>
        <li><a href="/components/form" class="text-primary hover:underline">Form</a> — Wrap Textarea with labels, validation, and help text</li>
    </ul>
</div>

@code {
    private string _text = "";

    private string _defaultCode = @"<Textarea placeholder=""Type your message here."" />";

    private string _bindingCode = @"<Textarea Value=""@_text"" OnInput=""@(e => _text = e.Value?.ToString() ?? """")"" placeholder=""Write something..."" />
<Lumeo.Text Size=""sm"" Color=""muted"">Character count: @_text.Length</Lumeo.Text>

@code {
    private string _text = """";
}";

    private string _disabledCode = @"<Textarea placeholder=""This textarea is disabled."" disabled />";

    private string _labelCode = @"<FormField Label=""Your Bio"" HelpText=""You can use markdown for formatting."">
    <Textarea placeholder=""Tell us a little bit about yourself."" rows=""4"" />
</FormField>";

    private string _rowsCode = @"<Textarea placeholder=""This textarea has 6 rows."" rows=""6"" />";

    private string _autoResizeCode = @"<Textarea Placeholder=""Start typing... the textarea will grow automatically"" AutoResize=""true"" />
<Textarea Placeholder=""Limited to 5 rows max"" AutoResize=""true"" MaxRows=""5"" />";

    private string _textareaCountValue = "";
    private bool _textareaShowCount = true;

    private string _showCountCode = @"<Stack Gap=""3"">
    <Flex Align=""center"" Gap=""3"">
        <Switch @bind-Checked=""_showCount"" />
        <Lumeo.Text Size=""sm"">Show character counter</Lumeo.Text>
    </Flex>
    <Textarea @bind-Value=""_value"" ShowCount=""@_showCount"" MaxLength=""200"" Placeholder=""Type to see the counter…"" />
</Stack>

@code {
    private string _value = """";
    private bool _showCount = true;
}";

    private string _previewResize = "Vertical";
    private Textarea.TextareaResize _textareaResizeEnum =>
        Enum.TryParse<Textarea.TextareaResize>(_previewResize, out var r) ? r : Textarea.TextareaResize.Vertical;

    private string _resizeInteractiveCode = @"<Segmented @bind-Value=""_resize"">
    <SegmentedItem Value=""Vertical"">Vertical</SegmentedItem>
    <SegmentedItem Value=""Horizontal"">Horizontal</SegmentedItem>
    <SegmentedItem Value=""Both"">Both</SegmentedItem>
    <SegmentedItem Value=""None"">None</SegmentedItem>
</Segmented>
<Textarea Resize=""@Enum.Parse<Textarea.TextareaResize>(_resize)""
          Placeholder=""Drag the resize handle"" rows=""4"" />

@code {
    private string _resize = ""Vertical"";
}";
}
