monorepo/lib/features/contacts/widgets/alphabet_scroll_page.dart

import 'package:dialer/widgets/username_color_generator.dart';
import 'package:flutter/material.dart';
import 'package:flutter_contacts/flutter_contacts.dart';
import 'package:qr_flutter/qr_flutter.dart';
import '../contact_state.dart';

class AlphabetScrollPage extends StatefulWidget {
  final List<Contact> contacts;
  final double scrollOffset;

  const AlphabetScrollPage({Key? key, required this.contacts, required this.scrollOffset}) : super(key: key);
  
  Contact? getSelfContact() {
    for (var contact in contacts) {
      if (contact.displayName.toLowerCase() == "user") {
        return contact;
      }
    }
    return null;
  }

  @override
  _AlphabetScrollPageState createState() => _AlphabetScrollPageState();
}

class _AlphabetScrollPageState extends State<AlphabetScrollPage> {
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController(initialScrollOffset: widget.scrollOffset);
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    final contactState = ContactState.of(context);
    contactState.setScrollOffset(_scrollController.offset);
  }

  @override
  Widget build(BuildContext context) {
    // Build the alphabetized contact map
    Map<String, List<Contact>> alphabetizedContacts = {};
    for (var contact in widget.contacts) {
      String firstLetter = contact.displayName.isNotEmpty ? contact.displayName[0].toUpperCase() : '#';
      if (!alphabetizedContacts.containsKey(firstLetter)) {
        alphabetizedContacts[firstLetter] = [];
      }
      alphabetizedContacts[firstLetter]!.add(contact);
    }

    List<String> alphabetKeys = alphabetizedContacts.keys.toList()..sort();

    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: [
          // Top buttons row
          Container(
            color: Colors.black,
            padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // Add Contact Button
                IconButton(
                  icon: Icon(Icons.add, color: Colors.blue),
                  onPressed: () {
                    // Show pop-up with two mock choices
                    showDialog(
                      context: context,
                      barrierDismissible: true, // Allows dismissal by tapping outside
                      builder: (BuildContext context) {
                        return AlertDialog(
                          backgroundColor: Colors.black,
                          content: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              TextButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                  // Action for Option 1
                                },
                                child: Text("Option 1", style: TextStyle(color: Colors.white)),
                              ),
                              TextButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                  // Action for Option 2
                                },
                                child: Text("Option 2", style: TextStyle(color: Colors.white)),
                              ),
                            ],
                          ),
                        );
                      },
                    );
                  },
                ),
                // QR Code Button
                IconButton(
                  icon: Icon(Icons.qr_code, color: widget.getSelfContact() != null ? Colors.blue : Colors.grey),

                  onPressed: widget.getSelfContact() != null ? () {
                    showDialog(
                      barrierColor: Colors.white24,
                      context: context,
                      barrierDismissible: true,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          backgroundColor: Colors.black,
                          content: SizedBox(
                            width: 200,
                            height: 220,
                            child: QrImageView(
                              data: widget.getSelfContact()!.toVCard(),
                              version: QrVersions.auto,
                              backgroundColor: Colors.white, // Ensure QR code is visible on black background
                              size: 200.0,
                            ),
                          ),
                        );
                      },
                    );
                  }: null,
                )
              ],
            ),
          ),
          // Contact List
          Expanded(
            child: ListView.builder(
              controller: _scrollController,
              itemCount: alphabetKeys.length,
              itemBuilder: (context, index) {
                String letter = alphabetKeys[index];
                List<Contact> contacts = alphabetizedContacts[letter]!;
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Alphabet Letter Header
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
                      child: Text(
                        letter,
                        style: TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    // Contact Entries
                    ...contacts.map((contact) {
                      String phoneNumber = contact.phones.isNotEmpty ? contact.phones.first.number : 'No phone number';
                      Color avatarColor = generateColorFromName(contact.displayName);
                      return ListTile(
                        leading: (contact.thumbnail != null && contact.thumbnail!.isNotEmpty)
                            ? CircleAvatar(
                          backgroundImage: MemoryImage(contact.thumbnail!),
                        )
                            : CircleAvatar(
                          backgroundColor: avatarColor,
                          child: Text(
                            contact.displayName.isNotEmpty ? contact.displayName[0].toUpperCase() : '?',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        title: Text(contact.displayName, style: TextStyle(color: Colors.white)),
                        subtitle: Text(phoneNumber, style: TextStyle(color: Colors.white70)),
                        onTap: () {
                          // Handle contact tap
                        },
                      );
                    }),
                  ],
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}