import 'dart:async';

import 'package:fikoyt_hmi_pano/apps/pages/screen_1/controller/screen.controller.dart';
import 'package:fikoyt_ui/Extensions/fiko_datetime.dart';
import 'package:fikoyt_ui/fikoyt_ui.dart';
import 'package:flutter/material.dart';

class BasePageWidget extends StatefulWidget {
  const BasePageWidget({super.key, child}) : child = child ?? const SizedBox.shrink();

  final Widget child;

  @override
  State<BasePageWidget> createState() => _BasePageWidgetState();
}

class _BasePageWidgetState extends State<BasePageWidget> {
  late final Screen1Controller screenLogic;
  late Timer _timer;
  Rx<String> tarih = DateTime.now().formatla("dd.MM.yyyy").obs;
  Rx<String> saat = DateTime.now().formatla("HH:mm:ss").obs;
  // final Rx<dynamic> deviceSettings = Rx<dynamic>(null);
  // final Rx<dynamic> deviceInfo = Rx<dynamic>(null);

  @override
  void initState() {
    super.initState();
    screenLogic = Get.put(Screen1Controller());
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      tarih.value = DateTime.now().formatla("dd.MM.yyyy");
      saat.value = DateTime.now().formatla("HH:mm:ss");
    });
    FikoYTCoreService.getDeviceID().then(
      (value) {
        FikoYTCoreService.ioEmit("FikoYT.uyar.devices.info", value, ack: (data) async {
          screenLogic.deviceSettings.value = data?["info"]?["settings"];
          screenLogic.deviceInfo.value = data;
        });
      },
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 36,
        shadowColor: Colors.black,
        automaticallyImplyLeading: true,
        elevation: 10,
        scrolledUnderElevation: 8,
        flexibleSpace: Column(
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                Container(
                  height: 36,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.bottomCenter,
                      end: Alignment.topCenter,
                      colors: [Colors.teal.shade700, Colors.teal.shade200],
                    ),
                  ),
                ),
                Column(
                  children: [
                    Row(
                      children: [
                        SizedBox(
                          width: 5,
                        ),
                        GestureDetector(
                          child: Image(
                            image: AssetImage('assets/core/icons/logo.png'),
                            width: 28,
                            height: 28,
                            filterQuality: FilterQuality.high,
                          ),
                          onTap: () {
                            context.vRouter.historyBack();
                          },
                        ),
                        const Image(
                          image: AssetImage('assets/core/icons/fikoyt-4.png'),
                          height: 28,
                          filterQuality: FilterQuality.high,
                        ),
                        // FikoYTButton(
                        //   text: "UYAR Döküm",
                        //   tema: FikoYTButtonTheme(
                        //     fontSize: 14,
                        //     textColor: Colors.white,
                        //     fontWeight: FontWeight.bold,
                        //   ),
                        // ),

                        Expanded(
                          child: Container(
                              // width: double.infinity,
                              height: 28,
                              margin: EdgeInsets.symmetric(
                                vertical: 3,
                                horizontal: 5,
                              ),
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  begin: Alignment.bottomCenter,
                                  end: Alignment.topCenter,
                                  colors: [Colors.white, Colors.white],
                                ),
                                borderRadius: BorderRadius.circular(5),
                              ),
                              child: Row(
                                children: [
                                  FikoYTButton(
                                    text: "ⓘ",
                                    tema: FikoYTButtonTheme(
                                      fontSize: 18,
                                      textColor: Colors.black,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Expanded(
                                    child: Obx(
                                      () => AnimatedFikoYTButton1(
                                        text: "UYAR Döküm '${(screenLogic.deviceSettings.value?["cihaz_ismi"] ?? "İsim Yok")}' Bilgi Ekranı",
                                        tema: FikoYTButtonTheme(
                                          fontSize: 18,
                                          textColor: Colors.black,
                                          fontWeight: FontWeight.bold,
                                          textShadow: [
                                            Shadow(
                                              blurRadius: 1,
                                              color: Colors.black38,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                  FikoYTButton(
                                    text: "ⓘ",
                                    tema: FikoYTButtonTheme(
                                      fontSize: 18,
                                      textColor: Colors.black,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ],
                              )),
                        ),
                        Column(
                          // spacing: 4,
                          children: [
                            Obx(
                              () => Opacity(
                                opacity: FikoYTCoreService.wsBagli.isTrue ? 1 : 0.3,
                                child: FikoYTRippleWave(
                                  repeat: FikoYTCoreService.wsBagli.isTrue,
                                  delay: 5500.ms,
                                  duration: 1000.ms,
                                  waveCount: 1,
                                  color: Colors.yellow,
                                  child: FikoYTButton(
                                    text: "📡",
                                    tema: FikoYTButtonTheme(
                                      fontSize: 12,
                                      textColor: Colors.black,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            Obx(
                              () => Opacity(
                                opacity: FikoYTCoreService.wsBagli.isTrue ? 1 : 0.3,
                                child: FikoYTRippleWave(
                                  repeat: FikoYTCoreService.wsBagli.isTrue,
                                  delay: 1000.ms,
                                  duration: 1000.ms,
                                  waveCount: 1,
                                  color: Colors.yellow,
                                  child: FikoYTButton(
                                    text: "⚡",
                                    tema: FikoYTButtonTheme(
                                      fontSize: 12,
                                      textColor: Colors.black,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                        Column(
                          children: [
                            Obx(
                              () => FikoYTButton(
                                text: tarih.value,
                                tema: FikoYTButtonTheme(
                                  textColor: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 12,
                                  textShadow: [
                                    Shadow(
                                      blurRadius: 1,
                                      color: Colors.black87,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            Obx(
                              () => FikoYTButton(
                                text: saat.value,
                                tema: FikoYTButtonTheme(
                                  textColor: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 12,
                                  textShadow: [
                                    Shadow(
                                      blurRadius: 1,
                                      color: Colors.black87,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                        Column(
                          spacing: 4,
                          children: [
                            FikoYTRippleWave(
                              repeat: true,
                              delay: 2000.ms,
                              duration: 1500.ms,
                              waveCount: 2,
                              color: Colors.white,
                              child: FikoYTButton(
                                text: "🔋",
                                tema: FikoYTButtonTheme(
                                  fontSize: 12,
                                  textColor: Colors.black,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            )
          ],
        ),
      ),
      /** */
      // bottomNavigationBar: Container(
      //   height: 50,
      //   decoration: BoxDecoration(
      //     gradient: LinearGradient(
      //       begin: Alignment.topCenter,
      //       end: Alignment.bottomCenter,
      //       colors: [Colors.teal.shade200, Colors.teal.shade800],
      //     ),
      //     boxShadow: <BoxShadow>[
      //       BoxShadow(
      //         color: Colors.black87,
      //         blurRadius: 20,
      //         spreadRadius: -2,
      //       ),
      //     ],
      //   ),
      // ),
      /** */
      body: widget.child,

      // Row(
      //   crossAxisAlignment: CrossAxisAlignment.start,
      //   children: [
      //     SingleChildScrollView(
      //       padding: EdgeInsets.all(5),
      //       physics: BouncingScrollPhysics(),
      //       child: Column(
      //         children: [
      //           ActiveProject(),
      //           PersonelNfcWidget(),
      //         ],
      //       ),
      //     ),
      //     Expanded(
      //       child: Center(
      //         child: IntroWidget(),
      //       ),
      //     ),
      //   ],
      // ),
    );
  }
}