// 기본 당겨서 새로고침 — 스크롤 제스처로 stage가 자동 구동됩니다.
RefreshTrigger(
  onRefresh: () async {
    await fetchLatestData();
  },
  child: ListView(
    children: const [
      Text('Inbox'),
      Text('Drafts'),
      Text('Sent'),
    ],
  ),
)

// 당김 거리 / 인디케이터 스타일 커스터마이징
RefreshTrigger(
  onRefresh: () async => fetchLatestData(),
  minExtent: 60,
  maxExtent: 200,
  refreshTriggerStyle: const CoreRefreshTriggerStyle(
    refreshingTextStyle: CoreTextStyle.token(
      CoreTextStyles.labelLarge,
      color: CoreColor.token(CoreColors.primary),
    ),
  ),
  child: ListView(children: items),
)

// 기본 당겨서 새로고침 — 포인터(터치/마우스) 제스처로 stage가
// 자동 구동됩니다. 스크롤 경계에서 당기면 인디케이터가 나타납니다.
RefreshTrigger(
  onRefresh: () async {
    await fetchLatestData();
  },
  child: div(
    const [
      Text('Inbox'),
      Text('Drafts'),
      Text('Sent'),
    ],
    classes: 'flex flex-col gap-${CoreSpace.scale.space8}',
  ),
)

// 인디케이터 스타일 커스터마이징 — 외부 상태로 구동할 때만
// stage 를 직접 주입합니다 (non-idle 이면 controlled).
RefreshTrigger(
  onRefresh: () async => fetchLatestData(),
  refreshTriggerStyle: const CoreRefreshTriggerStyle(
    refreshingTextStyle: CoreTextStyle.token(
      CoreTextStyles.labelLarge,
      color: CoreColor.token(CoreColors.primary),
    ),
  ),
  child: contentList,
)

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

  @override
  State<RefreshTriggerChainExample> createState() => _RefreshTriggerChainExampleState();
}

class _RefreshTriggerChainExampleState extends State<RefreshTriggerChainExample> {
  // A GlobalKey lets us access the RefreshTrigger's state so we can
  // trigger a programmatic refresh (via the button) in addition to the
  // pull gesture.
  final _refreshTriggerKey = GlobalKey<RefreshTriggerState>();

  @override
  Widget build(BuildContext context) {
    return OutlinedContainer(
      child: SizedBox(
        height: CoreSpace.space256,
        child:
            RefreshTrigger(
              key: _refreshTriggerKey,
              onRefresh: () async {
                await Future<void>.delayed(const Duration(seconds: 1));
              },
              child: ScrollArea(
                child: Container(
                  height: CoreSpace.space256 * 2,
                  padding: const EdgeInsets.only(top: CoreSpace.space32),
                  alignment: Alignment.topCenter,
                  child: Column(
                    mainAxisSize: .min,
                    children: [
                      const Text('Pull Me'),
                      const Gap.space16(),
                      Button(
                        onPressed: () => _refreshTriggerKey.currentState?.refresh(),
                        variant: .primary,
                        child: const Text('Refresh'),
                      ),
                    ],
                  ),
                ),
              ),
            ).withStyle(
              const CoreRefreshTriggerStyle(
                indicatorBackgroundColor: CoreColor.token(CoreColors.secondaryContainer),
                indicatorBorderRadius: CoreBorderRadius.all(CoreRadius.radius24),
                indicatorPadding: CoreEdgeInsets.symmetric(
                  horizontal: CoreSpace.space20,
                  vertical: CoreSpace.space12,
                ),
                indicatorGapStyle: CoreGapStyle(size: CoreSpace.space12),
              ),
            ),
      ),
    );
  }
}

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

  @override
  State<RefreshTriggerChainExample> createState() => _RefreshTriggerChainExampleState();
}

class _RefreshTriggerChainExampleState extends State<RefreshTriggerChainExample> {
  // A GlobalStateKey lets us access the RefreshTrigger's state so we
  // can trigger a programmatic refresh (via the button) in addition to
  // the pull gesture.
  final _refreshTriggerKey = GlobalStateKey<RefreshTriggerState>();

  @override
  Component build(BuildContext context) {
    return OutlinedContainer(
      classes: 'w-full',
      child:
          RefreshTrigger(
            key: _refreshTriggerKey,
            css: const Styles(raw: {'height': 'var(--coui-space-256)'}),
            onRefresh: () async {
              await Future<void>.delayed(const Duration(seconds: 1));
            },
            child: div(
              [
                const Text('Pull Me'),
                const Gap.space16(),
                Button(
                  onPressed: () => _refreshTriggerKey.currentState?.refresh(),
                  variant: .primary,
                  child: const Text('Refresh'),
                ),
              ],
              classes: 'flex w-full flex-col items-center',
              styles: const Styles(
                raw: {
                  'height': 'calc(var(--coui-space-256) * 2)',
                  'padding-top': 'var(--coui-space-32)',
                },
              ),
            ),
          ).withStyle(
            const CoreRefreshTriggerStyle(
              indicatorBackgroundColor: CoreColor.token(CoreColors.secondaryContainer),
              indicatorBorderRadius: CoreBorderRadius.all(CoreRadius.radius24),
              indicatorPadding: CoreEdgeInsets.symmetric(
                horizontal: CoreSpace.space20,
                vertical: CoreSpace.space12,
              ),
              indicatorGapStyle: CoreGapStyle(size: CoreSpace.space12),
            ),
          ),
    );
  }
}