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

import 'data.dart';

class UI extends StatelessWidget {
  const UI({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Contacts")),
        body: const Column(
          children: <Widget>[
            Expanded(child: ContactList()),
          ],
        ),
        bottomNavigationBar: const ConnectionStatus(),
      ),
    );
  }
}

class ContactList extends StatelessWidget {
  const ContactList({super.key});

  @override
  Widget build(BuildContext context) {
    return  Consumer<AppState>(
      builder: (BuildContext context, AppState state, Widget? child) {
        return ListView.builder(
          itemCount: state.contacts.length,
          itemBuilder: (BuildContext context, int index) {
            MapEntry<String, bool> data = state.contacts.entries.elementAt(index);
            String address = data.key;
            bool isOpen = data.value;
            return ListTile(
              leading: Icon(
                isOpen ? Icons.meeting_room : Icons.door_front_door,
                color: isOpen ? Colors.red : Colors.green,
              ),
              title: Text(address),
            );
          },
        );
      },
    );
  }
}

class ConnectionStatus extends StatelessWidget {
  const ConnectionStatus({super.key});

  @override
  Widget build(BuildContext context) {
    return  Consumer<AppState>(
      builder: (BuildContext context, AppState state, Widget? child) {
        Icon icon;
        Text text;
        if (state.brokerConnected) {
          icon = const Icon(Icons.cloud, color: Colors.green);
          text = const Text('Connected');
        } else {
          icon = const Icon(Icons.cloud_off, color: Colors.red);
          text = const Text('Disconnected');
        }

        return ListTile(leading: icon, title: text);
      },
    );
  }
}