import 'package:flutter/material.dart';

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

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

class _CompositionPageState extends State<CompositionPage> {
  String dialedNumber = "";


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


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: [
          Expanded(
            flex: 1,
            child: Center(
              child: Text(
                dialedNumber,
                style: const TextStyle(
                  fontSize: 32,
                  color: Colors.white,
                  letterSpacing: 2.0,
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                  childAspectRatio: 1,
                ),
                itemCount: 12,
                itemBuilder: (context, index) {
                  if (index < 9) {
                  
                    return _buildDialButton((index + 1).toString());
                  } else if (index == 9) {
                  
                    return const SizedBox.shrink();
                  } else if (index == 10) {
                  
                    return _buildDialButton('0');
                  } else {
                  
                    return _buildDeleteButton();
                  }
                },
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 20.0),
            child: FloatingActionButton(
              backgroundColor: Colors.green,
              onPressed: () {
              
              },
              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(20),
      ),
      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(20),
      ),
      child: const Icon(
        Icons.backspace,
        color: Colors.white,
        size: 24,
      ),
    );
  }
}