import 'package:fikoyt_akcali_v1/apps/finans/core/services/finans.servis.dart';
import 'package:fikoyt_akcali_v1/apps/finans/kisi/pages/ana-sayfa/ana-sayfa-fab.dart';
import 'package:fikoyt_akcali_v1/apps/finans/uye/hesaplar/hesap/widgets/hesap_listesi_widget.dart';
import 'package:fikoyt_akcali_v1/core/widgets/header_widget/header_widget.dart';
import 'package:fikoyt_akcali_v1/core/widgets/uygulama_baslik/uygulama_baslik.dart';
import 'package:fikoyt_ui/fikoyt_ui.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class SayfaKisiAna extends StatelessWidget {
  FinansServis? finansServis = FikoYTCoreService.servisler.getServis<FinansServis>();

  @override
  Widget build(BuildContext context) {
    SchedulerBinding.instance.addPostFrameCallback((_) {
      finansServis?.altBaslik.value = "Ana Sayfa";
    });

    return FikoYTSliverApp(
      leading: UygulamaBaslikSol(),
      title: UygulamaBaslikOrta(),
      actions: <Widget>[UygulamaBaslikSag()],
      drawer: finansServis?.solMenu.value,
      backgroundColor: Theme.of(context).extension<FikoTheme>()?.backgroundColor,
      appBarColor: Theme.of(context).extension<FikoTheme>()?.appBarColor?.withAlpha(230),
      headerExpandedHeight: 230,
      // stretchMaxHeight: 100,
      fullyStretchable: true,
      centerTitle: true,
      alwaysShowLeadingAndAction: true,
      golgeGoster: false,
      alwaysShowTitle: true,
      curvedBodyRadius: 0,
      // bottomNavigationBarHeight: 50,
      // bottomNavigationBar: Padding(
      //   padding: const EdgeInsets.only(left: 50.0, right: 50.0),
      //   child: ClipPath(
      //     clipper: ShapeBorderClipper(
      //       shape: RoundedRectangleBorder(
      //         borderRadius: BorderRadius.only(topRight: Radius.circular(35), topLeft: Radius.circular(35)),
      //       ),
      //     ),
      //     child: AnaSayfaFab(),
      //   ),
      // ),
      // onStretchTrigger: () async {
      //   context.vRouter.to("/");
      // },
      ///
      bottomNavigationBar: Padding(padding: const EdgeInsets.only(bottom: 8.0), child: AnaSayfaFab()),

      ///
      headerWidget: Obx(
        () => HeaderWidget(
          ovalResimUrl: finansServis?.aktifKullanici.value?.profilResmiUrl ?? "🏠",
          baslik: finansServis?.aktifKullanici.value?.ismi,
          baslikTheme: Theme.of(context).extension<FikoYTButtonTheme>()?.copyWith(
            textColor: Theme.of(context).extension<FikoTheme>()?.secondaryTextColor,
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
          altBaslik: "Sisteminizde Kayıtlı Verilerinizin Yönetim Ve Gözetim Merkezi.",
          altBaslikTheme: Theme.of(context).extension<FikoYTButtonTheme>()?.copyWith(
            textColor: Theme.of(context).extension<FikoTheme>()?.tertiaryTextColor,
            fontWeight: FontWeight.normal,
            fontSize: 12,
          ),
          ovalResimTiklandi: finansServis?.profilResmiDegistir,
        ),
      ),

      ///
      bodyMaxWidth: 350,
      body: <Widget>[
        /** */
        HesapListesiWidget(),

        // SizedBox(height: 1400),
        // Text("sffffffffffffff"),
        AnotherGauge(
          valueNotifier: ValueNotifier(0.0),
          capBorderColor: Colors.white.withOpacity(0.0),
          capBorderWidth: 5,
          capColor: Colors.white.withOpacity(0.0),
          faceBorderColor: Colors.white.withOpacity(0.5),
          faceStartColor: Colors.tealAccent,
          faceEndColor: Colors.teal,
          faceBorderWidth: 10,
          borderOffset: 0,
          subTicksColor: Colors.white,
          needleColor: Colors.black.withOpacity(0.7),
          showMainTicks: true,
          mainTicksColor: Colors.red.withOpacity(0.1),
          rangeNeedleColor: false,
          segmentWidth: 10,
          showFrame: false,
          gaugeSize: 200,
          capSize: 28,
          segments: [
            GaugeSegment('Low', 40, Colors.red),
            GaugeSegment('Medium', 50, Colors.orange),
            GaugeSegment('High', 60, Colors.red),
          ],
          // valueSymbol: ' km/h',
          displayWidget: const Column(
            children: [
              SizedBox(height: 5),
              Text('🍵 Mola Vakti', style: TextStyle(color: Colors.white, fontSize: 9, fontWeight: FontWeight.bold)),
              SizedBox(height: 0),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Opacity(
                    opacity: 0.9,
                    child: Text('🚌', style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.bold)),
                  ),
                  Opacity(
                    opacity: 0.9,
                    child: Text('🚩', style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.bold)),
                  ),
                  Opacity(
                    opacity: 0.9,
                    child: Text('💔', style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.bold)),
                  ),
                  Opacity(
                    opacity: 0.9,
                    child: Text('🛌', style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.bold)),
                  ),
                  Opacity(
                    opacity: 0.9,
                    child: Text('🏄', style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.bold)),
                  ),
                ],
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Opacity(
                    opacity: 0.9,
                    child: Text('🧯', style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.bold)),
                  ),
                  Opacity(
                    opacity: 0.9,
                    child: Text('🥪', style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.bold)),
                  ),
                  Opacity(
                    opacity: 0.9,
                    child: Text('📝', style: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.bold)),
                  ),
                ],
              ),
            ],
          ),
          maxValue: 150,
          merkezWidget: const Text("👷🏼", style: TextStyle(fontSize: 22)),

          valueWidget: const Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Opacity(
                    opacity: 0.9,
                    child: Text('🌍', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold)),
                  ),
                  Opacity(
                    opacity: 0.9,
                    child: Text('🤖', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold)),
                  ),
                  Opacity(
                    opacity: 0.9,
                    child: Text('📡', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold)),
                  ),
                  Opacity(
                    opacity: 0.9,
                    child: Text('💳', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold)),
                  ),
                ],
              ),
              Text(
                '🕓1:16:13'
                '➕0:00:00',
                style: TextStyle(color: Colors.white, fontSize: 9, fontWeight: FontWeight.bold),
              ),
              // Text(
              //   '➕0:00:00',
              //   style: TextStyle(
              //     color: Colors.white,
              //     fontSize: 10,
              //     fontWeight: FontWeight.bold,
              //   ),
              // ),
              Text('🧮1:16:13', style: TextStyle(color: Colors.white, fontSize: 9, fontWeight: FontWeight.bold)),
            ],
          ),
        ),
      ],
      sliverAltKisimGoster: false,
      sliverAltKisim: SizedBox.shrink(),
    );
  }
}