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

class CallPage extends StatefulWidget {
  final String phoneNumber;

  const CallPage({Key? key, required this.phoneNumber}) : super(key: key);

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

class _CallPageState extends State<CallPage> {
  bool isCalling = true;
  int callDuration = 0;
  late final Timer _timer;

  @override
  void initState() {
    super.initState();
    _startCallTimer();
  }

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

  void _startCallTimer() {
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (isCalling) {
        setState(() {
          callDuration++;
        });
      }
    });
  }

  void _endCall() {
    setState(() {
      isCalling = false;
    });
    Navigator.pop(context);
  }

  String _formatDuration(int seconds) {
    final minutes = seconds ~/ 60;
    final remainingSeconds = seconds % 60;
    return '${minutes.toString().padLeft(2, '0')}:${remainingSeconds.toString().padLeft(2, '0')}';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center( // Center widget to center all the content vertically and horizontally
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center, // Ensure the text and button are centered horizontally
          children: [
            Text(
              "Calling ${widget.phoneNumber}",
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
            const SizedBox(height: 20),
            Text(
              isCalling ? _formatDuration(callDuration) : "Call Ended",
              style: TextStyle(color: Colors.greenAccent, fontSize: 20),
            ),
            const SizedBox(height: 40),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red,
                shape: CircleBorder(),
                padding: const EdgeInsets.all(20),
              ),
              onPressed: _endCall,
              child: Icon(Icons.call_end, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}