import 'package:double_back_to_close_app/double_back_to_close_app.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

import 'package:get/get.dart';
import 'package:IQ/app/global/global_snackbar.dart';

import 'package:IQ/app/global/static_informs.dart';
import 'package:IQ/app/global/text_widget.dart';
import 'package:IQ/app/modules/selectISP/models/isp_model.dart';
import 'package:IQ/main.dart';
import 'package:IQ/app/modules/selectISP/controllers/select_isp_controller.dart';

List<dynamic>? storedISPs = storage.read('listOfIsps');
int? initialItem;
List<ISPsData>? listOfIsps = [];
List<ISPsData>? serversList = [];
List<ISPsData>? saved = storedISPs != null
    ? storedISPs?.map((e) => ISPsData.fromJson(e)).toList()
    : [];
bool? isCustomIsp = false;
bool? showNext = false;
String? url;
String? liveDataUrl;
ISPsData? selectedISP;

// ignore: must_be_immutable
class SelectISPView extends GetView<SelectISPController> {
  const SelectISPView({Key? key}) : super(key: key);
  // var selectedISPController = Get.find<SelectISPController>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: brandColor,
      appBar: AppBar(
        backgroundColor: brandColor,
        elevation: 0,
        leading: Container(),
      ),
      body: DoubleBackToCloseApp(
        snackBar: snackBar,
        child: Stack(
          alignment: Alignment.topCenter,
          children: [
            SvgPicture.asset(
              'assets/2/icon.svg',
              height: 80,
              width: 80,
            ),
            SizedBox(
              width: widthSize(context),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(height: 190),
                  TextWidget(
                    color: const Color(0xffC4C4C4),
                    fontSize: 22,
                    text: "select_isp_title".tr,
                  ),
                  const SizedBox(height: 50),
                  GetBuilder(
                    init: SelectISPController(),
                    builder: (SelectISPController c) {
                      return c.futureBuilderWidget(
                        widget: Stack(
                          alignment: Alignment.center,
                          children: [
                            Container(
                              height: 200,
                              width: Get.width,
                              margin: const EdgeInsets.symmetric(
                                horizontal: 20,
                              ),
                              child: ListWheelScrollView.useDelegate(
                                physics: const FixedExtentScrollPhysics(),
                                childDelegate: ListWheelChildBuilderDelegate(
                                  builder: (context, index) {
                                    return Center(
                                      child: TextWidget(
                                        text: c.serversList?[index].name ?? '',
                                        color: Colors.white,
                                        fontWeight: FontWeight.w400,
                                        fontSize: 20,
                                      ),
                                    );
                                  },
                                  childCount: c.serversList?.length ?? 0,
                                ),
                                itemExtent: 45,
                                diameterRatio: 9,
                                controller: FixedExtentScrollController(
                                  initialItem: initialItem ?? 0,
                                ),
                                useMagnifier: true,
                                magnification: 1.7,
                                clipBehavior: Clip.antiAliasWithSaveLayer,
                                onSelectedItemChanged: c.onSelectedItemChanged,
                                overAndUnderCenterOpacity: 0.7,
                              ),
                            ),
                            Column(
                              children: [
                                Container(
                                  margin: const EdgeInsets.symmetric(
                                      horizontal: 120),
                                  child: const Divider(
                                    color: Colors.white,
                                    thickness: 2,
                                  ),
                                ),
                                const SizedBox(height: 30),
                                Container(
                                  margin: const EdgeInsets.symmetric(
                                      horizontal: 120),
                                  child: const Divider(
                                    color: Colors.white,
                                    thickness: 2,
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                  const Spacer(),
                  GetBuilder(
                    builder: (SelectISPController c) {
                      return !showNext!
                          ? Container()
                          : Container(
                              margin: const EdgeInsets.only(bottom: 30),
                              child: Align(
                                alignment: Alignment.bottomCenter,
                                child: Container(
                                  decoration: const BoxDecoration(
                                    border: Border(
                                      bottom: BorderSide(
                                        color: Colors.white,
                                        width: 1,
                                      ),
                                    ),
                                  ),
                                  child: TextButton(
                                    onPressed: () => c.onIspSelected(),
                                    child: TextWidget(
                                      color: Colors.white,
                                      fontSize: 26,
                                      text: 'next_button'.tr,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                              ),
                            );
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: GetBuilder(
        builder: (SelectISPController c) {
          return !showNext!
              ? Container()
              : Container(
                  margin: const EdgeInsets.only(
                    right: 18,
                    left: 18,
                    bottom: 8,
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GetBuilder(
                        builder: (SelectISPController c) {
                          return isCustomIsp!
                              ? Container(
                                  margin: const EdgeInsets.only(
                                    left: 18,
                                  ),
                                  child: FloatingActionButton(
                                    heroTag: "btn1",
                                    onPressed: c.removeISP,
                                    backgroundColor: Colors.white,
                                    child: SvgPicture.asset(
                                      'assets/remove.svg',
                                      height: 30,
                                      width: 30,
                                      color: brandColor,
                                    ),
                                  ),
                                )
                              : Container();
                        },
                      ),
                      FloatingActionButton(
                        heroTag: "btn2",
                        onPressed: () {
                          // Get.offNamed(Routes.ADD_ADDRESS);
                        },
                        backgroundColor: Colors.white,
                        child: Icon(
                          Icons.add,
                          size: 50,
                          color: brandColor,
                        ),
                      ),
                    ],
                  ),
                );
        },
      ),
    );
  }
}