import 'dart:io';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:diplomaticquarterapp/core/model/ImagesInfo.dart';
import 'package:diplomaticquarterapp/core/service/AuthenticatedUserObject.dart';
import 'package:diplomaticquarterapp/locator.dart';
import 'package:diplomaticquarterapp/pages/medical/smart_watch_health_data/health_data_list.dart';
import 'package:diplomaticquarterapp/services/smartwatch_integration/SmartWatchIntegrationService.dart';
import 'package:diplomaticquarterapp/theme/colors.dart';
import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class SmartWatchInstructions extends StatefulWidget {
  @override
  _SmartWatchInstructionsState createState() => _SmartWatchInstructionsState();
}

class _SmartWatchInstructionsState extends State<SmartWatchInstructions> {
  CarouselController buttonCarouselController = CarouselController();

  bool hasAlreadySynced = false;

  AuthenticatedUserObject authenticatedUserObject = locator<AuthenticatedUserObject>();

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      if (authenticatedUserObject.isLogin) getLastPatientRecord(context);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      appBarTitle: TranslationBase.of(context).smartWatches,
      isShowAppBar: true,
      isShowDecPage: true,
      showNewAppBar: true,
      showNewAppBarTitle: true,
      backgroundColor: Color(0xffF7F7F7),
      description: TranslationBase.of(context).infoHealthData,
      imagesInfo: [
        ImagesInfo(imageEn: 'https://hmgwebservices.com/Images/MobileApp/imges-info/health-data/en/0.png', imageAr: 'https://hmgwebservices.com/Images/MobileApp/imges-info/health-data/ar/0.png'),
        ImagesInfo(imageEn: 'https://hmgwebservices.com/Images/MobileApp/imges-info/health-data/en/1.png', imageAr: 'https://hmgwebservices.com/Images/MobileApp/imges-info/health-data/ar/1.png')
      ],
      body: Column(
        children: [
          Expanded(
            child: Container(
              child: Platform.isIOS ? _getAppleWatchInstructions() : _getGoogleWatchInstructions(),
            ),
          ),
          DefaultButton(
            TranslationBase.of(context).continues,
            () {
              _openHealthDataList();
            },
            color: Color(0xff359846),
          ).insideContainer
        ],
      ),
    );
  }

  _getAppleWatchInstructions() {
    return SingleChildScrollView(
      padding: EdgeInsets.all(21),
      physics: BouncingScrollPhysics(),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            TranslationBase.of(context).supportedWatches,
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.w600,
              letterSpacing: -1.2,
              color: Color(0xff2E303A),
            ),
          ),
          Row(
            children: [
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(top: 10.0),
                  child: Row(
                    children: [
                      Image.asset("assets/images/SmartWatches/apple-watch-1.jpeg", width: 70.0, height: 70.0),
                      Padding(
                        padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                        child: Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("Apple Watch Series 1", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        ),
                      )
                    ],
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(top: 10.0),
                  child: Row(
                    children: [
                      Image.asset("assets/images/SmartWatches/apple-watch-2.jpg", width: 70.0, height: 70.0),
                      Padding(
                        padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                        child: Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("Apple Watch Series 2", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: 10.0),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/apple-watch-3.jpg", width: 70.0, height: 70.0),
                        Padding(
                          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                          child: Container(
                            width: MediaQuery.of(context).size.width * 0.22,
                            child: Text("Apple Watch Series 3", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/apple-watch-4.jpg", width: 70.0, height: 70.0),
                        Padding(
                          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                          child: Container(
                            width: MediaQuery.of(context).size.width * 0.22,
                            child: Text("Apple Watch Series 4", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10.0),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/apple-watch-5.jpg", width: 70.0, height: 70.0),
                        Padding(
                          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                          child: Container(
                            width: MediaQuery.of(context).size.width * 0.22,
                            child: Text("Apple Watch Series 5", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/Apple-Watch-6.png", width: 70.0, height: 70.0),
                        Padding(
                          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                          child: Container(
                            width: MediaQuery.of(context).size.width * 0.22,
                            child: Text("Apple Watch Series 6", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10.0),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/miBand3.jpg", width: 70.0, height: 70.0),
                        Padding(
                          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                          child: Container(
                            width: MediaQuery.of(context).size.width * 0.22,
                            child: Text("Mi Band 3", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/miBand4.jpg", width: 70.0, height: 70.0),
                        Padding(
                          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                          child: Container(
                            width: MediaQuery.of(context).size.width * 0.22,
                            child: Text("Mi Band 4", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 12),
          Text(
            TranslationBase.of(context).syncInstructionsIntro1,
            style: TextStyle(
              fontSize: 14.0,
              letterSpacing: -0.56,
              fontWeight: FontWeight.w600,
              color: Color(0xff575757),
            ),
          ),
          SizedBox(height: 12),
          Text(
            TranslationBase.of(context).syncInstructionsIntro2,
            style: TextStyle(
              fontSize: 14.0,
              letterSpacing: -0.56,
              fontWeight: FontWeight.w600,
              color: Color(0xff575757),
            ),
          ),
          SizedBox(height: 12),
          InkWell(
            onTap: () {
              showInstructionsDialog();
            },
            child: Text(TranslationBase.of(context).watchInstructions,
                style: TextStyle(color: CustomColors.accentColor, fontWeight: FontWeight.w600, letterSpacing: -0.64, decoration: TextDecoration.underline)),
          ),
        ],
      ),
    );
  }

  _getGoogleWatchInstructions() {
    return SingleChildScrollView(
      padding: EdgeInsets.all(21),
      physics: BouncingScrollPhysics(),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            TranslationBase.of(context).supportedWatches,
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.w600,
              letterSpacing: -1.2,
              color: Color(0xff2E303A),
            ),
          ),
          Container(
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 10.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/huawei-watch-2.png", width: 70.0, height: 70.0),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("Huawei Watch 2", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 10.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/ticwatche2.png", width: 70.0, height: 70.0),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("Mobovi TicWatch E2", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10.0),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/huawei-watch-2-classic.png", width: 70.0, height: 70.0),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("Huawei Watch", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/ticwatche2.png", width: 70.0, height: 70.0),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("Fossil Sport", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10.0),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/misfit-vapor-2.jpg", width: 70.0, height: 70.0),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("MisFit Vapor 2", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/lg-watch-sport.jpg", width: 70.0, height: 70.0),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("LG Watch Sport", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10.0),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/miBand3.jpg", width: 70.0, height: 70.0),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("Mi Band 3", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 15.0),
                    child: Row(
                      children: [
                        Image.asset("assets/images/SmartWatches/miBand4.jpg", width: 70.0, height: 70.0),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.22,
                          child: Text("Mi Band 4", overflow: TextOverflow.clip, style: TextStyle(fontSize: 12.0)),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 12),
          InkWell(
            onTap: () {
              launch("https://wearos.google.com/#find-your-watch");
            },
            child: Text(
              TranslationBase.of(context).moreSupportedWatches,
              style: TextStyle(fontSize: 14.0, color: Colors.blue, fontWeight: FontWeight.w600, decoration: TextDecoration.underline, letterSpacing: -0.56),
            ),
          ),
          SizedBox(height: 12),
          Text(
            TranslationBase.of(context).syncInstructionsIntro1,
            style: TextStyle(
              fontSize: 14.0,
              letterSpacing: -0.56,
              fontWeight: FontWeight.w600,
              color: Color(0xff575757),
            ),
          ),
          SizedBox(height: 12),
          Text(
            TranslationBase.of(context).syncInstructionsIntro2,
            style: TextStyle(
              fontSize: 14.0,
              letterSpacing: -0.56,
              fontWeight: FontWeight.w600,
              color: Color(0xff575757),
            ),
          ),
          SizedBox(height: 12),
          InkWell(
            onTap: () {
              showInstructionsDialog();
            },
            child: Text(
              TranslationBase.of(context).watchInstructions,
              style: TextStyle(color: CustomColors.accentColor, fontWeight: FontWeight.w600, letterSpacing: -0.64, decoration: TextDecoration.underline),
            ),
          ),
        ],
      ),
    );
  }

  showInstructionsDialog() {
    showGeneralDialog(
        barrierColor: Colors.black.withOpacity(0.5),
        transitionBuilder: (context, a1, a2, widget) {
          final curvedValue = Curves.easeInOutBack.transform(a1.value) - 1.0;
          return Transform(
            transform: Matrix4.translationValues(0.0, curvedValue * 200, 0.0),
            child: Opacity(
              opacity: a1.value,
              child: Dialog(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: 350.0,
                      padding: EdgeInsets.all(21),
                      color: Colors.white,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                TranslationBase.of(context).smartWatches,
                                style: TextStyle(fontSize: 18.0, color: Color(0xff2E303A), fontWeight: FontWeight.w600, letterSpacing: -1.2),
                              ),
                              IconButton(
                                icon: Icon(
                                  Icons.close,
                                  color: Color(0xff2E303A),
                                ),
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                              ),
                            ],
                          ),
                          Text(
                            TranslationBase.of(context).syncInstructionsIntro3,
                            style: TextStyle(
                              fontSize: 14.0,
                              letterSpacing: -0.56,
                              color: Color(0xff575757),
                            ),
                          ),
                          SizedBox(height: 12),
                          Platform.isIOS
                              ? Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      TranslationBase.of(context).iosInstructions1,
                                      style: TextStyle(
                                        fontSize: 14.0,
                                        letterSpacing: -0.56,
                                        color: Color(0xff575757),
                                      ),
                                    ),
                                    SizedBox(height: 12),
                                    Text(
                                      TranslationBase.of(context).iosInstructions2,
                                      style: TextStyle(
                                        fontSize: 14.0,
                                        letterSpacing: -0.56,
                                        color: Color(0xff575757),
                                      ),
                                    ),
                                    SizedBox(height: 12),
                                    Text(
                                      TranslationBase.of(context).iosInstructions3,
                                      style: TextStyle(
                                        fontSize: 14.0,
                                        letterSpacing: -0.56,
                                        color: Color(0xff575757),
                                      ),
                                    ),
                                  ],
                                )
                              : Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      TranslationBase.of(context).androidInstructions1,
                                      style: TextStyle(
                                        fontSize: 14.0,
                                        letterSpacing: -0.56,
                                        color: Color(0xff575757),
                                      ),
                                    ),
                                    SizedBox(height: 12),
                                    Text(
                                      TranslationBase.of(context).androidInstructions2,
                                      style: TextStyle(
                                        fontSize: 14.0,
                                        letterSpacing: -0.56,
                                        color: Color(0xff575757),
                                      ),
                                    ),
                                    SizedBox(height: 12),
                                    Text(
                                      TranslationBase.of(context).androidInstructions3,
                                      style: TextStyle(
                                        fontSize: 14.0,
                                        letterSpacing: -0.56,
                                        color: Color(0xff575757),
                                      ),
                                    ),
                                    SizedBox(height: 12),
                                    Text(
                                      TranslationBase.of(context).androidInstructions4,
                                      style: TextStyle(
                                        fontSize: 14.0,
                                        letterSpacing: -0.56,
                                        color: Color(0xff575757),
                                      ),
                                    ),
                                  ],
                                ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
        transitionDuration: Duration(milliseconds: 500),
        barrierDismissible: true,
        barrierLabel: '',
        context: context,
        pageBuilder: (context, animation1, animation2) {});
  }

  getLastPatientRecord(BuildContext context) {
    SmartWatchIntegrationService service = new SmartWatchIntegrationService();
    GifLoaderDialogUtils.showMyDialog(context);
    service.getLastPatientRecord(context).then((res) {
      GifLoaderDialogUtils.hideDialog(context);
      if (res['MessageStatus'] == 1) {
        print(res['Med_GetPatientLastRecordList']);
        setState(() {
          if (res['Med_GetPatientLastRecordList'] != null)
            hasAlreadySynced = true;
          else
            hasAlreadySynced = false;
        });
      } else {}
    }).catchError((err) {
      GifLoaderDialogUtils.hideDialog(context);
      print(err);
    });
  }

  _openHealthDataList() {
    Navigator.push(
      context,
      FadePage(
        page: HealthDataList(),
      ),
    );
  }
}
