import 'package:fikoyt_sistem/apps/uyar/core/base_sol_menu.dart';
import 'package:fikoyt_sistem/main.dart';
import 'package:fikoyt_ui/fikoyt_ui.dart';
import 'package:fikoyt_ui/ui/fikoyt_card.dart';
import 'package:flutter/material.dart';
import 'package:gauge_indicator/gauge_indicator.dart' hide GaugeSegment;

class AdminSunucuDurumu extends StatelessWidget {
  AdminSunucuDurumu({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 760),
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // SizedBox(height: 22),
                    FittedBox(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          ColorFiltered(
                            colorFilter: const ColorFilter.mode(Colors.white, BlendMode.modulate),
                            child: Image.asset("assets/uyar/sunucu.png", height: 256),
                          ),
                          /** */
                          Center(
                            child: FikoYTButton(text: "Sunucu Durumu", tema: FikoYTButtonTheme(fontSize: 24)),
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            spacing: 5,
                            children: [
                              FikoYTButton(
                                text: "🟢 Her şey normal görünüyor",
                                tema: FikoYTButtonTheme(fontSize: 12, fontWeight: FontWeight.normal),
                              ),
                              SizedBox(height: 10),
                            ],
                          ),
                        ],
                      ),
                    ),

                    Align(
                      alignment: Alignment.centerLeft,
                      child: FikoYTButton(text: "Öneriler", tema: FikoYTButtonTheme(fontSize: 18)),
                    ),

                    FikoYTCard(
                      theme: FikoYTCardTheme(elevation: 0),
                      children: [
                        FikoYTButton(
                          text: "💡 Birinci Oneri",
                          tema: FikoYTButtonTheme(fontSize: 12, fontWeight: FontWeight.w300),
                        ),
                        FikoYTButton(
                          text: "💡 Ikinci Oneri",
                          tema: FikoYTButtonTheme(fontSize: 12, fontWeight: FontWeight.w300),
                        ),
                        FikoYTButton(
                          text: "💡 Ucuncu Oneri",
                          tema: FikoYTButtonTheme(fontSize: 12, fontWeight: FontWeight.w300),
                        ),

                        Align(
                          alignment: Alignment.bottomRight,
                          child: FikoYTButton(
                            text: "Ayrıntılar",
                            tema: FikoYTButtonTheme(
                              textColor: Colors.black87,
                              backgroundColor: Colors.white,

                              // fontWeight: FontWeight.w700,
                              edgePadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                              borderColor: Colors.black38,
                              elevation: 3,
                              fontWeight: FontWeight.bold,
                              fontSize: 14,
                              radius: 3.0,
                            ),
                            onPressed: () {},
                          ),
                        ),
                      ],
                    ),
                    AnimatedRadialGauge(
                      /// The animation duration.
                      duration: const Duration(seconds: 1),
                      curve: Curves.elasticOut,

                      /// Define the radius.
                      /// If you omit this value, the parent size will be used, if possible.
                      radius: 100,

                      /// Gauge value.
                      value: 20.0,

                      /// Optionally, you can configure your gauge, providing additional
                      /// styles and transformers.
                      axis: GaugeAxis(
                        /// Provide the [min] and [max] value for the [value] argument.
                        min: 0,
                        max: 100,

                        /// Render the gauge as a 180-degree arc.
                        degrees: 180,

                        /// Set the background color and axis thickness.
                        style: const GaugeAxisStyle(thickness: 20, background: Color(0xFFDFE2EC), segmentSpacing: 4),

                        /// Define the pointer that will indicate the progress (optional).
                        pointer: GaugePointer.needle(
                          width: 16,
                          borderRadius: 16,
                          height: 74,
                          color: Color(0xFF193663),
                          // backgroundColor: Color(0xFF193663),
                        ),

                        /// Define the progress bar (optional).
                        progressBar: const GaugeProgressBar.rounded(color: Color(0xFFB4C2F8)),

                        /// Define axis segments (optional).

                        /// You can also, define the child builder.
                        /// You will build a value label in the following way, but you can use the widget of your choice.
                        ///
                        /// For non-value related widgets, take a look at the [child] parameter.
                        /// ```
                        /// builder: (context, child, value) => RadialGaugeLabel(
                        ///  value: value,
                        ///  style: const TextStyle(
                        ///    color: Colors.black,
                        ///    fontSize: 46,
                        ///    fontWeight: FontWeight.bold,
                        ///  ),
                        /// ),
                        /// ```
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}