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

import '../../../../app/themes/app_colors.dart';
import '../../../../app/themes/app_text.dart';
import './monitoring_view_model.dart';

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

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<MonitoringViewModel>.reactive(
      viewModelBuilder: () => MonitoringViewModel(),
      onViewModelReady: (MonitoringViewModel model) async {
        await model.init();
      },
      fireOnViewModelReadyOnce: true,
      createNewViewModelOnInsert: true,
      builder: (
        BuildContext context,
        MonitoringViewModel model,
        Widget? child,
      ) {
        return Scaffold(
          body: Padding(
            padding: const EdgeInsets.all(30),
            child: Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      "Monitoring Router",
                      style: boldTextStyle.copyWith(fontSize: 30),
                    ),
                    const SizedBox(height: 20),
                    const Image(
                      image: AssetImage("assets/logo.png"),
                      width: 125,
                      height: 125,
                    ),
                    const SizedBox(height: 20),
                    Container(
                      padding: const EdgeInsets.all(20),
                      width: double.infinity,
                      decoration: BoxDecoration(
                        color: mainColor,
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          TheText(
                            title: 'Nama',
                            text: model.otherFunction.ontModel!.nama!,
                          ),
                          TheText(
                            title: 'No Internet',
                            text: model.otherFunction.ontModel!.noInternet!,
                          ),
                          TheText(
                            title: 'No Telpon',
                            text: model.otherFunction.ontModel!.noHp!,
                          ),
                          TheText(
                            title: 'Alamat',
                            text: model.otherFunction.ontModel!.alamat!,
                          ),
                          TheText(
                            title: 'Paket',
                            text: model.otherFunction.ontModel!.langganan!,
                          ),
                          TheText(
                            title: 'Status',
                            text: model.otherFunction.ontModel!.status!,
                          ),
                          TheText(
                            title: 'Speed',
                            // text: "0.04 Mbps Down/0.03Mbps Up",
                            text:
                                "${model.otherFunction.ontModel!.download!} Mbps Down/${model.otherFunction.ontModel!.upload!} Mbps Up",
                          ),
                          TheText(
                            title: 'Last Updated',
                            // text: "2023-01-01 00:00:00",
                            text: model.otherFunction.ontModel!
                                .getFormattedDate(),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

class TheText extends StatelessWidget {
  const TheText({
    super.key,
    required this.title,
    required this.text,
  });

  final String title;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: RichText(
        text: TextSpan(
          text: '$title : ',
          style: boldTextStyle.copyWith(
            color: lightColor,
          ),
          children: [
            TextSpan(
              text: text,
              style: regularTextStyle.copyWith(
                color: lightColor,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
