import 'package:flutter/material.dart';

import '../../app/base/infrastructure/errorBar/error_bar_controller.dart';
import '../../infrastructure/state_extensions.dart';
import '../controller_provider.dart';

class ErrorBar extends StatelessWidget {
  final bool visible;
  const ErrorBar({required this.visible, super.key});

  final Duration animationDuration = const Duration(milliseconds: 200);

  @override
  Widget build(BuildContext context) => ControllerProvider<ErrorBarController>(
    create: (context) => ErrorBarController(),
    child: (context) => AnimatedSize(
      duration: animationDuration,
      child: AnimatedSwitcher(
          duration: animationDuration,
          transitionBuilder: (Widget child, Animation<double> animation) => SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(0.0, -1.0),
              end: Offset.zero,
            ).animate(animation),
            child: child,
          ),
          child: Visibility(
              key: Key(visible.hashCode.toString()),
              visible: visible,
              replacement: const SizedBox(width: double.infinity),
              child: Builder(
                builder: (context) {
                  var controller = context.watchController<ErrorBarController>();
                  var status = controller.connectivityStatusKnown() && !controller.isConnected()
                      ? (icon: Icons.wifi_off_outlined, text: 'Offline', color: Colors.grey.shade600)
                      : (icon: Icons.wifi_find_outlined, text: 'Verbindung fehlgeschlagen', color: Theme.of(context).primaryColor);

                  return Container(
                    height: 20,
                    decoration: BoxDecoration(
                      color: status.color,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(status.icon, size: 14),
                        const SizedBox(width: 10),
                        Text(status.text, style: const TextStyle(fontSize: 12))
                      ],
                    ),
                  );
                },
              )
          )
      ),
    ),
  );
}