import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:socket_io_client/socket_io_client.dart';

class SocketConnectionIndicator extends StatefulWidget {
  final Socket socket;
  final double size;

  const SocketConnectionIndicator(
      {super.key, required this.socket, this.size = 12});

  @override
  State<SocketConnectionIndicator> createState() =>
      _SocketConnectionIndicatorState();
}

class _SocketConnectionIndicatorState extends State<SocketConnectionIndicator> {
  var connectionStateColor = Colors.amber.obs;

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

    connectionStateColor =
        widget.socket.connected ? Colors.green.obs : Colors.red.obs;

    widget.socket.onConnect((data) {
      connectionStateColor.value = Colors.green;
    });
    widget.socket.onConnecting((data) {
      connectionStateColor.value = Colors.amber;
    });
    widget.socket.onReconnectAttempt((data) {
      connectionStateColor.value = Colors.blue;
    });
    widget.socket.onDisconnect((data) {
      connectionStateColor.value = Colors.red;
    });
  }

  @override
  Widget build(BuildContext context) {
    return InkResponse(
      onTap: () {
        widget.socket.disconnect().connect();
      },
      child: Obx(
        () => Container(
          width: widget.size,
          height: widget.size,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: connectionStateColor.value,
          ),
        ),
      ),
    );
  }
}