import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:styled_widget/styled_widget.dart';

class TestPage extends StatelessWidget {
  const TestPage({super.key});
  @override
  Widget build(BuildContext context) {
    final cs = Theme.of(context).colorScheme;
    return Scaffold(
      appBar: AppBar(title: Text('Test'), backgroundColor: cs.inversePrimary),
      body: Center(child: Text('Hello', style: TextStyle(color: cs.primary))),
      bottomNavigationBar: NavigationBar(
        selectedIndex: 0,
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: '首页'),
          NavigationDestination(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
    );
  }
}

class AllWidgetsDemo extends HookWidget {
  const AllWidgetsDemo({super.key});

  @override
  Widget build(BuildContext context) {
    final switchValue = useState(true);
    final checkboxValue = useState(false);
    final radioValue = useState(1);
    final dropdownValue = useState('A');

    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Hooks 组件 Demo')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          const Text('✅ 按钮类').padding(bottom: 8),
          Wrap(
            spacing: 12,
            runSpacing: 12,
            children: [
              FilledButton(onPressed: () {}, child: const Text('Filled')),
              ElevatedButton(onPressed: () {}, child: const Text('Elevated')),
              OutlinedButton(onPressed: () {}, child: const Text('Outlined')),
              TextButton(onPressed: () {}, child: const Text('Text')),
              IconButton(onPressed: () {}, icon: const Icon(Icons.thumb_up)),
              FloatingActionButton(
                onPressed: () {},
                child: const Icon(Icons.add),
              ),
            ],
          ),

          const Divider(height: 32),
          const Text('✅ 表单 & 状态类'),
          const SizedBox(height: 12),

          TextField(
            decoration: const InputDecoration(labelText: '文本框'),
          ),

          const SizedBox(height: 8),
          Switch(
            value: switchValue.value,
            onChanged: (v) => switchValue.value = v,
          ),
          Checkbox(
            value: checkboxValue.value,
            onChanged: (v) => checkboxValue.value = v ?? false,
          ),
          Radio(
            value: 1,
            groupValue: radioValue.value,
            onChanged: (v) => radioValue.value = v ?? 1,
          ),
          Radio(
            value: 2,
            groupValue: radioValue.value,
            onChanged: (v) => radioValue.value = v ?? 1,
          ),
          DropdownMenu<String>(
            initialSelection: dropdownValue.value,
            onSelected: (v) => dropdownValue.value = v!,
            dropdownMenuEntries: const [
              DropdownMenuEntry(value: 'A', label: '选项 A'),
              DropdownMenuEntry(value: 'B', label: '选项 B'),
            ],
          ),

          const Divider(height: 32),
          const Text('✅ 展示类组件'),
          const Chip(label: Text('示例 Chip')),
          const Tooltip(message: '我是提示', child: Icon(Icons.info)),
          const Card(
            child: Padding(
              padding: EdgeInsets.all(12),
              child: Text('这是一个卡片'),
            ),
          ),
          const ListTile(
            leading: Icon(Icons.person),
            title: Text('列表项'),
            subtitle: Text('副标题'),
            trailing: Icon(Icons.arrow_forward_ios),
          ),

          const Divider(height: 32),
          const Text('✅ 进度组件'),
          const SizedBox(height: 8),
          const Center(
            child: CircularProgressIndicator(),
          ),
          const SizedBox(height: 8),
          const LinearProgressIndicator(value: 0.6),

          const Divider(height: 32),
          const Text('✅ 导航与交互'),
          Builder(
            builder: (context) => ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('被点击了')),
                );
              },
              child: const Text('弹出 SnackBar'),
            ),
          ),
        ],
      ),
    );
  }
}