import 'package:electric_app/app/themes/app_text.dart';
import 'package:electric_app/ui/widgets/my_textformfield.dart';
import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

import '../../../app/themes/app_colors.dart';
import '../../../model/electric_model.dart';
import './log_data_view_model.dart';

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

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<LogDataViewModel>.reactive(
      viewModelBuilder: () => LogDataViewModel(),
      onViewModelReady: (LogDataViewModel model) async {
        await model.init();
      },
      builder: (
        BuildContext context,
        LogDataViewModel model,
        Widget? child,
      ) {
        return Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: false,
            backgroundColor: mainColor,
            title: const Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image(
                  image: AssetImage("assets/logo.png"),
                  width: 30,
                  height: 30,
                ),
                SizedBox(width: 10),
                Text(
                  'Log Data',
                  style: TextStyle(
                    color: backgroundColor,
                  ),
                ),
              ],
            ),
          ),
          body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Column(
                children: [
                  const SizedBox(height: 10),
                  MyTextFormField(
                    controller: model.dateController,
                    hintText: "Pencarian Tanggal",
                    suffixIcon: const Icon(
                      Icons.calendar_month,
                      color: mainColor,
                    ),
                    readOnly: true,
                    onTap: () async {
                      model.log.wtf("Pencarian Tanggal");
                      await model.changeDate(context);
                    },
                  ),
                  const SizedBox(height: 15),
                  _ContainerData(
                    name: "Fase R",
                    data: model.listFaseR,
                    color: Colors.red,
                  ),
                  const SizedBox(height: 15),
                  _ContainerData(
                    name: "Fase S",
                    data: model.listFaseS,
                    color: Colors.yellow,
                  ),
                  const SizedBox(height: 15),
                  _ContainerData(
                    name: "Fase T",
                    data: model.listFaseT,
                    color: Colors.green,
                  ),
                  const SizedBox(height: 15),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

class _ContainerData extends StatelessWidget {
  const _ContainerData({
    required this.name,
    required this.data,
    required this.color,
  });

  final String name;
  final List<ElectricModel> data;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: const Offset(0, 3),
            )
          ]),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "Data Log$name",
            style: boldTextStyle.copyWith(
              color: color,
            ),
          ),
          const SizedBox(height: 5),
          if (data.isNotEmpty)
            Table(
              border: TableBorder.all(),
              children: [
                const TableRow(
                  children: [
                    TableCell(
                      child: Center(
                        child: Text(
                          'Waktu',
                          style: boldTextStyle,
                        ),
                      ),
                    ),
                    TableCell(
                      child: Center(
                        child: Text(
                          'Voltage',
                          style: boldTextStyle,
                        ),
                      ),
                    ),
                    TableCell(
                      child: Center(
                        child: Text(
                          'Current',
                          style: boldTextStyle,
                        ),
                      ),
                    ),
                    TableCell(
                      child: Center(
                        child: Text(
                          'Power',
                          style: boldTextStyle,
                        ),
                      ),
                    ),
                    TableCell(
                      child: Center(
                        child: Text(
                          'Energy',
                          style: boldTextStyle,
                        ),
                      ),
                    ),
                    TableCell(
                      child: Center(
                        child: Text(
                          'PF',
                          style: boldTextStyle,
                        ),
                      ),
                    ),
                  ],
                ),
                ...data.map(
                  (data) {
                    // add 1 day to the date
                    var theDate = DateTime.parse(data.date!);
                    theDate = theDate.add(const Duration(days: 1));
                    // get the date in the format dd-mm-yyyy
                    String formattedDate =
                        theDate.toIso8601String().split('T')[0];
                    return TableRow(
                      children: [
                        TableCell(
                          child: Center(
                              child: Text(
                            "$formattedDate\n${data.time!}",
                            style: italicTextStyle.copyWith(fontSize: 12),
                          )),
                        ),
                        TableCell(
                          child: Center(
                              child: Text(
                            data.voltage! == ' NAN'
                                ? '-'
                                : '${data.voltage!} V',
                            style: italicTextStyle.copyWith(fontSize: 12),
                          )),
                        ),
                        TableCell(
                          child: Center(
                              child: Text(
                            data.current! == ' NAN'
                                ? '-'
                                : '${data.current!} A',
                            style: italicTextStyle.copyWith(fontSize: 12),
                          )),
                        ),
                        TableCell(
                          child: Center(
                              child: Text(
                            data.power! == ' NAN' ? '-' : '${data.power!} W',
                            style: italicTextStyle.copyWith(fontSize: 12),
                          )),
                        ),
                        TableCell(
                          child: Center(
                              child: Text(
                            data.energy! == ' NAN'
                                ? '-'
                                : '${data.energy!} KWh',
                            style: italicTextStyle.copyWith(fontSize: 12),
                          )),
                        ),
                        TableCell(
                          child: Center(
                              child: Text(
                            data.pf! == ' NAN' ? '-' : '${data.pf!} %',
                            style: italicTextStyle.copyWith(fontSize: 12),
                          )),
                        ),
                      ],
                    );
                  },
                ),
              ],
            ),
          if (data.isEmpty)
            const Center(
              child: Text(
                "Tidak ada data",
                style: boldTextStyle,
              ),
            ),
        ],
      ),
    );
  }
}