import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Time List Demo',
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
      home: const MyHomePage(title: 'Time List Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
  Timer? _timer;
  Color _selectedColor = Colors.blue;
  bool _showFirstItem = true;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(const Duration(seconds: 5), (timer) {
      setState(() {
        _showFirstItem = !_showFirstItem;
      });
    });
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title)),
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          if (index == 0 && !_showFirstItem) {
            return const SizedBox.shrink();
          }

          return Container(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: _selectedColor.withOpacity(0.1),
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: _selectedColor),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(_items[index], style: TextStyle(color: _selectedColor)),
                if (index == 3)
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: MenuAnchor(
                      builder: (context, controller, child) {
                        return ElevatedButton(
                          onPressed: () {
                            if (controller.isOpen) {
                              controller.close();
                            } else {
                              controller.open();
                            }
                          },
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Container(
                                width: 20,
                                height: 20,
                                decoration: BoxDecoration(color: _selectedColor, shape: BoxShape.circle),
                              ),
                              const SizedBox(width: 8),
                              const Text('Select Color'),
                            ],
                          ),
                        );
                      },
                      menuChildren: [
                        MenuItemButton(
                          child: const Text('Blue'),
                          onPressed: () {
                            setState(() => _selectedColor = Colors.blue);
                          },
                        ),
                        MenuItemButton(
                          child: const Text('Red'),
                          onPressed: () {
                            setState(() => _selectedColor = Colors.red);
                          },
                        ),
                      ],
                    ),
                  ),
              ],
            ),
          );
        },
      ),
    );
  }
}