import 'dart:async';

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 Timer _timer;
  RxString tarih = DateTime.now().formatla("dd.MM.yyyy").obs;
  RxString saat = DateTime.now().formatla("HH:mm:ss").obs;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      tarih.value = DateTime.now().formatla("dd.MM.yyyy");
      saat.value = DateTime.now().formatla("HH:mm:ss");
    });
  }

  @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: FikoYTButton(
                                      text: "UYAR Döküm 'CNC-MAK-1' 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: [
                            FikoYTButton(
                              text: "📡",
                              tema: FikoYTButtonTheme(
                                fontSize: 12,
                                textColor: Colors.black,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            Obx(
                              () => Opacity(
                                opacity: FikoYTCoreService.wsBagli.isTrue ? 1 : 0.3,
                                child: FikoYTRippleWave(
                                  repeat: true,
                                  delay: 2500.ms,
                                  waveCount: 1,
                                  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: [
                            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(),
      //       ),
      //     ),
      //   ],
      // ),
    );
  }
}