import 'package:flutter/material.dart';

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

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

class _CompositionPageState extends State<CompositionPage> {
  String dialedNumber = "";
  final List<String> contacts = [
    'Alice Johnson',
    'Bob Smith',
    'Carol White',
    'David Brown',
    'Eve Black',
    'Frank Grey',
    'Grace Green',
    'Heidi Gold',
    'Ivan Silver',
    'Judy Blue'
  ];

  void _onNumberPress(String number) {
    setState(() {
      dialedNumber += number;
    });
  }

  void _onDeletePress() {
    setState(() {
      if (dialedNumber.isNotEmpty) {
        dialedNumber = dialedNumber.substring(0, dialedNumber.length - 1);
      }
    });
  }

  void _onClearPress() {
    setState(() {
      dialedNumber = "";
    });
  }

  List<String> _getFilteredContacts() {
    return contacts
        .where((contact) =>
            contact.toLowerCase().contains(dialedNumber.toLowerCase()))
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: [
          // Top half: Display contacts matching dialed number
          Expanded(
            flex: 2,
            child: Container(
              padding: const EdgeInsets.all(16.0),
              color: Colors.black,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: ListView(
                      children: _getFilteredContacts().map((contact) {
                        return ListTile(
                          title: Text(contact,
                              style: const TextStyle(color: Colors.white)),
                          onTap: () {
                            // Handle contact selection if needed
                          },
                        );
                      }).toList(),
                    ),
                  ),
                ],
              ),
            ),
          ),

          // Bottom half: Dialpad and Dialed number display with erase button
          Expanded(
            flex: 2,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  // Display dialed number with erase button
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Align(
                          alignment: Alignment
                              .center, // Aligns text to the center of the screen
                          child: Text(
                            dialedNumber,
                            style: const TextStyle(
                                fontSize: 24, color: Colors.white),
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ),
                      IconButton(
                        onPressed: _onClearPress,
                        icon: const Icon(Icons.backspace, color: Colors.white),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),

                  // Wrapping the dialpad in a SingleChildScrollView to prevent overflow
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          // First Row (1, 2, 3)
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              _buildDialButton('1'),
                              _buildDialButton('2'),
                              _buildDialButton('3'),
                            ],
                          ),
                          // Second Row (4, 5, 6)
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              _buildDialButton('4'),
                              _buildDialButton('5'),
                              _buildDialButton('6'),
                            ],
                          ),
                          // Third Row (7, 8, 9)
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              _buildDialButton('7'),
                              _buildDialButton('8'),
                              _buildDialButton('9'),
                            ],
                          ),
                          // Fourth Row (*, 0, #)
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              _buildDialButton('*'),
                              _buildDialButton('0'),
                              _buildDialButton('#'),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),

          // Bottom action: Call button with padding
          Padding(
            padding: const EdgeInsets.only(bottom: 20.0),
            child: FloatingActionButton(
              backgroundColor: Colors.green,
              onPressed: () {
                // Handle call action
              },
              child: const Icon(Icons.phone, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDialButton(String number) {
    return ElevatedButton(
      onPressed: () => _onNumberPress(number),
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.black,
        shape: const CircleBorder(),
        padding:
            const EdgeInsets.all(16), // Adjusted padding to prevent overflow
      ),
      child: Text(
        number,
        style: const TextStyle(
          fontSize: 24,
          color: Colors.white,
        ),
      ),
    );
  }

  Widget _buildDeleteButton() {
    return ElevatedButton(
      onPressed: _onDeletePress,
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.black,
        shape: const CircleBorder(),
        padding:
            const EdgeInsets.all(16), // Adjusted padding to prevent overflow
      ),
      child: const Icon(
        Icons.backspace,
        color: Colors.white,
        size: 24,
      ),
    );
  }
}