// 좌측에서 열리는 드로어 스타일 오버레이
Swiper(
  position: CoreSwiperPosition.left,
  open: isMenuOpen,
  onOpenChanged: (isOpen) => setState(() => isMenuOpen = isOpen),
  overlayContent: const Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Dashboard'),
      Text('Settings'),
    ],
  ),
  child: const AppHeader(),
)

// 아래에서 올라오는 시트 스타일
Swiper(
  position: CoreSwiperPosition.bottom,
  variant: CoreSwiperVariant.sheet,
  open: isSheetOpen,
  onOpenChanged: (isOpen) => setState(() => isSheetOpen = isOpen),
  overlayContent: const ActionSheet(),
  child: const PageContent(),
)

// 좌측에서 열리는 드로어 스타일 오버레이
Swiper(
  position: CoreSwiperPosition.left,
  open: isMenuOpen,
  onOpenChanged: (isOpen) => setState(() => isMenuOpen = isOpen),
  overlayContent: div([
    const Text('Dashboard'),
    const Text('Settings'),
  ], classes: 'flex flex-col gap-${CoreSpace.scale.space8}'),
  child: const AppHeader(),
)

// 아래에서 올라오는 시트 스타일
Swiper(
  position: CoreSwiperPosition.bottom,
  variant: CoreSwiperVariant.sheet,
  open: isSheetOpen,
  onOpenChanged: (isOpen) => setState(() => isSheetOpen = isOpen),
  overlayContent: const ActionSheet(),
  child: const PageContent(),
)

class SwiperChainExample extends StatefulWidget {
  const SwiperChainExample({super.key});

  @override
  State<SwiperChainExample> createState() => _SwiperChainExampleState();
}

class _SwiperChainExampleState extends State<SwiperChainExample> {
  CoreSwiperPosition _position = CoreSwiperPosition.left;
  bool _open = false;

  Widget _positionButton(CoreSwiperPosition position, String label) {
    return Button(
      variant: _position == position ? .primary : .outline,
      size: .sm,
      onPressed: () => setState(() => _position = position),
      child: Text(label),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Swiper(
      position: _position,
      open: _open,
      onOpenChanged: (isOpen) => setState(() => _open = isOpen),
      // Centered like the shadcn demo via `mainAxisAlignment` —
      // alignment is caller-owned (the drawer never centers content
      // itself). On the full-height left / right sides the column is
      // forced tall so the alignment centers; on content-sized
      // top / bottom sides the column wraps and it is a no-op.
      overlayContent: Padding(
        padding: const EdgeInsets.all(CoreSpace.space16),
        child: Column(
          crossAxisAlignment: .start,
          mainAxisAlignment: .center,
          mainAxisSize: .min,
          spacing: CoreSpace.space8,
          children: [
            const Text('Dashboard'),
            const Text('Settings'),
            const Text('Profile'),
            Button(
              variant: .outline,
              size: .sm,
              onPressed: () => setState(() => _open = false),
              child: const Text('Close'),
            ),
          ],
        ),
      ),
      // The whole preview area is the swipe surface (the gesture layer
      // covers the Swiper child) — the card just labels it.
      child: SizedBox(
        width: double.infinity,
        height: CoreSpace.space256,
        child: Center(
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(CoreSpace.space24),
              child: Column(
                mainAxisSize: .min,
                children: [
                  const Text('Swipe me!').titleMedium.onSurface,
                  const Gap(gapStyle: CoreGapStyle(size: CoreSpace.space12)),
                  Join(
                    children: [
                      _positionButton(CoreSwiperPosition.left, 'Left'),
                      _positionButton(CoreSwiperPosition.right, 'Right'),
                      _positionButton(CoreSwiperPosition.top, 'Top'),
                      _positionButton(CoreSwiperPosition.bottom, 'Bottom'),
                    ],
                  ),
                  const Gap(gapStyle: CoreGapStyle(size: CoreSpace.space12)),
                  Button(
                    onPressed: () => setState(() => _open = true),
                    child: const Text('Open swiper'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ).withStyle(
      const CoreSwiperStyle(
        dragHandleColor: CoreColor.token(CoreColors.primary),
        dragHandleWidth: CoreSize.size64,
        dragHandleThickness: CoreStrokeWidth.stroke6,
        dragHandleBorderRadius: CoreBorderRadius.all(CoreRadius.radius4),
      ),
    );
  }
}

class SwiperChainExample extends StatefulComponent {
  const SwiperChainExample({super.key});

  @override
  State<SwiperChainExample> createState() => _SwiperChainExampleState();
}

class _SwiperChainExampleState extends State<SwiperChainExample> {
  CoreSwiperPosition _position = CoreSwiperPosition.left;
  bool _open = false;

  Component _positionButton(CoreSwiperPosition position, String label) {
    return Button(
      variant: _position == position ? .primary : .outline,
      size: .sm,
      onPressed: () => setState(() => _position = position),
      child: Text(label),
    );
  }

  @override
  Component build(BuildContext context) {
    return Swiper(
      position: _position,
      open: _open,
      onOpenChanged: (isOpen) => setState(() => _open = isOpen),
      // Centered like the shadcn demo via `justify-center` —
      // alignment is caller-owned (the drawer never centers content
      // itself). On the full-height left / right sides `h-full` gives
      // the column room so the content centers; on content-sized
      // top / bottom sides it resolves to auto and is a no-op.
      overlayContent: div(
        classes:
            'flex h-full flex-col items-start justify-center '
            'gap-${CoreSpace.scale.space8} p-${CoreSpace.scale.space16}',
        [
          const Text('Dashboard'),
          const Text('Settings'),
          const Text('Profile'),
          Button(
            variant: .outline,
            size: .sm,
            onPressed: () => setState(() => _open = false),
            child: const Text('Close'),
          ),
        ],
      ),
      // The whole preview area is the swipe surface (the gesture layer
      // covers the Swiper child) — the card just labels it.
      child: div(
        classes: 'flex w-full items-center justify-center',
        styles: Styles(
          raw: {'min-height': 'var(--coui-space-${CoreSpace.space256.toInt()})'},
        ),
        [
          Card(
            child: div(
              classes:
                  'flex flex-col items-center gap-${CoreSpace.scale.space12} '
                  'p-${CoreSpace.scale.space24}',
              [
                const Text('Swipe me!').titleMedium.onSurface,
                Join(
                  children: [
                    _positionButton(CoreSwiperPosition.left, 'Left'),
                    _positionButton(CoreSwiperPosition.right, 'Right'),
                    _positionButton(CoreSwiperPosition.top, 'Top'),
                    _positionButton(CoreSwiperPosition.bottom, 'Bottom'),
                  ],
                ),
                Button(
                  onPressed: () => setState(() => _open = true),
                  child: const Text('Open swiper'),
                ),
              ],
            ),
          ),
        ],
      ),
    ).withStyle(
      const CoreSwiperStyle(
        dragHandleColor: CoreColor.token(CoreColors.primary),
        dragHandleWidth: CoreSize.size64,
        dragHandleThickness: CoreStrokeWidth.stroke6,
        dragHandleBorderRadius: CoreBorderRadius.all(CoreRadius.radius4),
      ),
    );
  }
}