@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default (Right)" Code="@_codeSheetDefault">
    <Sheet @bind-Open="_sheet1Open">
        <SheetTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Open Sheet</Button>
        </SheetTrigger>
        <SheetContent>
            <SheetHeader>
                <SheetTitle>Edit Profile</SheetTitle>
                <SheetDescription>Make changes to your profile here.</SheetDescription>
            </SheetHeader>
            <Stack Gap="3" Class="py-4">
                <Stack Gap="1.5">
                    <Label>Name</Label>
                    <Input placeholder="Your name" />
                </Stack>
            </Stack>
            <SheetFooter>
                <Button OnClick="() => _sheet1Open = false">Save changes</Button>
            </SheetFooter>
        </SheetContent>
    </Sheet>
</PatternCard>
<PatternCard Label="Left Side" Code="@_codeSheetLeft">
    <Sheet @bind-Open="_sheet2Open">
        <SheetTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Open Left Sheet</Button>
        </SheetTrigger>
        <SheetContent Side="SheetContent.SheetSide.Left">
            <SheetHeader>
                <SheetTitle>Navigation</SheetTitle>
                <SheetDescription>Browse pages from here.</SheetDescription>
            </SheetHeader>
            <Stack Gap="1" Class="py-4">
                <Button Variant="Button.ButtonVariant.Ghost" Class="w-full justify-start">Home</Button>
                <Button Variant="Button.ButtonVariant.Ghost" Class="w-full justify-start">About</Button>
                <Button Variant="Button.ButtonVariant.Ghost" Class="w-full justify-start">Contact</Button>
            </Stack>
        </SheetContent>
    </Sheet>
</PatternCard>
<PatternCard Label="With Form" Code="@_codeSheetForm">
    <Sheet @bind-Open="_sheet3Open">
        <SheetTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Contact Form</Button>
        </SheetTrigger>
        <SheetContent>
            <SheetHeader>
                <SheetTitle>Contact Us</SheetTitle>
                <SheetDescription>Send us a message.</SheetDescription>
            </SheetHeader>
            <Stack Gap="3" Class="py-4">
                <Stack Gap="1.5">
                    <Label>Email</Label>
                    <Input placeholder="you@example.com" />
                </Stack>
                <Stack Gap="1.5">
                    <Label>Message</Label>
                    <Textarea placeholder="Your message..." Class="min-h-[100px]" />
                </Stack>
            </Stack>
            <SheetFooter>
                <Button Variant="Button.ButtonVariant.Outline" OnClick="() => _sheet3Open = false">Cancel</Button>
                <Button OnClick="() => _sheet3Open = false">Send</Button>
            </SheetFooter>
        </SheetContent>
    </Sheet>
</PatternCard>
<PatternCard Label="Top Side" Code="@_codeSheetTop">
    <Sheet @bind-Open="_sheet4Open">
        <SheetTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Open Top Sheet</Button>
        </SheetTrigger>
        <SheetContent Side="SheetContent.SheetSide.Top">
            <SheetHeader>
                <SheetTitle>Notifications</SheetTitle>
                <SheetDescription>You have 3 unread messages.</SheetDescription>
            </SheetHeader>
            <Stack Gap="2" Class="py-4">
                <Flex Gap="3" Align="center" Class="rounded-md border border-border p-3">
                    <DynamicIcon Name="Mail" Class="h-4 w-4 text-muted-foreground" />
                    <Lumeo.Text As="span" Size="sm" Class="flex-1">New message from Alex</Lumeo.Text>
                    <Lumeo.Text As="span" Size="xs" Color="muted">2m ago</Lumeo.Text>
                </Flex>
                <Flex Gap="3" Align="center" Class="rounded-md border border-border p-3">
                    <DynamicIcon Name="Bell" Class="h-4 w-4 text-muted-foreground" />
                    <Lumeo.Text As="span" Size="sm" Class="flex-1">Your report is ready</Lumeo.Text>
                    <Lumeo.Text As="span" Size="xs" Color="muted">1h ago</Lumeo.Text>
                </Flex>
            </Stack>
        </SheetContent>
    </Sheet>
</PatternCard>
<PatternCard Label="Bottom Side" Code="@_codeSheetBottom">
    <Sheet @bind-Open="_sheet5Open">
        <SheetTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Open Bottom Sheet</Button>
        </SheetTrigger>
        <SheetContent Side="SheetContent.SheetSide.Bottom">
            <SheetHeader>
                <SheetTitle>Details</SheetTitle>
                <SheetDescription>View item details below.</SheetDescription>
            </SheetHeader>
            <Stack Gap="2" Class="py-4">
                <Flex Justify="between" Class="text-sm">
                    <Lumeo.Text As="span" Color="muted">Status</Lumeo.Text>
                    <Badge Variant="Badge.BadgeVariant.Success">Active</Badge>
                </Flex>
                <Separator />
                <Flex Justify="between" Class="text-sm">
                    <Lumeo.Text As="span" Color="muted">Created</Lumeo.Text>
                    <Lumeo.Text As="span" Color="foreground">Jan 15, 2025</Lumeo.Text>
                </Flex>
            </Stack>
        </SheetContent>
    </Sheet>
</PatternCard>
</Stack>

@code {
    private bool _sheet1Open;

    private bool _sheet2Open;

    private bool _sheet3Open;

    private bool _sheet4Open;

    private bool _sheet5Open;

        private string _codeSheetDefault = @"<Sheet @bind-Open=""_open"">
        <SheetTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Open Sheet</Button>
        </SheetTrigger>
        <SheetContent>
            <SheetHeader>
                <SheetTitle>Edit Profile</SheetTitle>
                <SheetDescription>Make changes to your profile here.</SheetDescription>
            </SheetHeader>
            <div class=""py-4"">
                <Label>Name</Label>
                <Input placeholder=""Your name"" />
            </div>
            <SheetFooter>
                <Button OnClick=""() => _open = false"">Save changes</Button>
            </SheetFooter>
        </SheetContent>
    </Sheet>";

        private string _codeSheetLeft = @"<Sheet @bind-Open=""_open"">
        <SheetTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Open Left Sheet</Button>
        </SheetTrigger>
        <SheetContent Side=""SheetContent.SheetSide.Left"">
            <SheetHeader>
                <SheetTitle>Navigation</SheetTitle>
            </SheetHeader>
            <div class=""py-4 space-y-1"">
                <Button Variant=""Button.ButtonVariant.Ghost"" Class=""w-full justify-start"">Home</Button>
                <Button Variant=""Button.ButtonVariant.Ghost"" Class=""w-full justify-start"">About</Button>
            </div>
        </SheetContent>
    </Sheet>";

        private string _codeSheetForm = @"<Sheet @bind-Open=""_open"">
        <SheetTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Contact Form</Button>
        </SheetTrigger>
        <SheetContent>
            <SheetHeader>
                <SheetTitle>Contact Us</SheetTitle>
            </SheetHeader>
            <div class=""py-4 space-y-3"">
                <Label>Email</Label>
                <Input placeholder=""you@example.com"" />
                <Label>Message</Label>
                <Textarea placeholder=""Your message..."" />
            </div>
            <SheetFooter>
                <Button Variant=""Button.ButtonVariant.Outline"" OnClick=""() => _open = false"">Cancel</Button>
                <Button OnClick=""() => _open = false"">Send</Button>
            </SheetFooter>
        </SheetContent>
    </Sheet>";

        private string _codeSheetTop = @"<Sheet @bind-Open=""_open"">
        <SheetTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Open Top Sheet</Button>
        </SheetTrigger>
        <SheetContent Side=""SheetContent.SheetSide.Top"">
            <SheetHeader>
                <SheetTitle>Notifications</SheetTitle>
            </SheetHeader>
            <div class=""py-4 space-y-2"">
                <!-- notification items -->
            </div>
        </SheetContent>
    </Sheet>";

        private string _codeSheetBottom = @"<Sheet @bind-Open=""_open"">
        <SheetTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Open Bottom Sheet</Button>
        </SheetTrigger>
        <SheetContent Side=""SheetContent.SheetSide.Bottom"">
            <SheetHeader>
                <SheetTitle>Details</SheetTitle>
            </SheetHeader>
            <div class=""py-4 space-y-2"">
                <!-- detail items -->
            </div>
        </SheetContent>
    </Sheet>";
}
