import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:introduction_screen/introduction_screen.dart';
import 'package:provider/provider.dart';
import 'package:fcs/model/language_model.dart';
import 'package:fcs/model/main_model.dart';
import 'package:fcs/model/manual_model.dart';
import 'package:fcs/pages/manual/slide_data_page.dart';
import 'package:fcs/vo/manual.dart';
import 'package:fcs/widget/local_text.dart';
import 'package:fcs/widget/progress.dart';

class SlidePage extends StatefulWidget {
  final ManualItem helpDetail;
  final int index;

  SlidePage({this.helpDetail, this.index});
  @override
  _SlidePageState createState() => _SlidePageState();
}

class _SlidePageState extends State<SlidePage> {
  bool isEng;
  bool _isLoading = false;

  void _onIntroEnd(context) {
    Navigator.pop(context);
  }

  List<Widget> instructionText(BuildContext context, isEng, image, imgHeight,
      width, List<Instruction> instructions) {
    List<Widget> list = new List<Widget>();
    var imgWidth = width - (width * 0.25);
    File imgFile = File(image);

    list.add(
      Card(
        color: const Color(0x7f7c94b6),
        child: Opacity(
            opacity: 0.6,
            child: Image.file(
              imgFile,
              alignment: AlignmentDirectional.topCenter,
              height: imgHeight,
              width: imgWidth,
            )),
      ),
    );

    for (var i = 0; i < instructions.length; i++) {
      var instruction = instructions[i];
      var textPositionTop = (imgHeight / 480) * instruction.top;
      var textPositionLeft = (imgWidth / 360) * instruction.left;

      list.add(Positioned(
        top: double.parse(textPositionTop.toString()),
        left: double.parse(textPositionLeft.toString()),
        child: instruction.text.length > 1
            ? Container(
                constraints: BoxConstraints(maxWidth: 300),
                child: Card(
                  color: Colors.blue,
                  child: Padding(
                    padding: const EdgeInsets.all(3.0),
                    child: Text(
                      instruction.text,
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ))
            : Container(
                constraints: BoxConstraints(maxWidth: 200),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      alignment: Alignment.topCenter,
                      width: 30,
                      height: 30,
                      decoration: BoxDecoration(
                          shape: BoxShape.circle, color: Colors.blue),
                      child: isEng
                          ? Container(
                              padding: EdgeInsets.only(top: 5),
                              child: Text(
                                instruction.text,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: Colors.white, fontSize: 14.0),
                              ),
                            )
                          : Text(
                              instruction.text,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: Colors.white, fontSize: 14.0),
                            ),
                    ),
                  ],
                ),
              ),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    var mainModel = Provider.of<MainModel>(context);
    var languageModel = Provider.of<LanguageModel>(context);
    var manualModel = Provider.of<ManualModel>(context);
    isEng = languageModel.isEng;

    List<PageViewModel> pageViews = new List();
    var screenSize = MediaQuery.of(context).size;
    var width = screenSize.width;
    var height = screenSize.height;
    var imgHeight = height - (height * 0.25);
    const bodyStyle = TextStyle(fontSize: 19.0);
    const pageDecoration = const PageDecoration(
      titleTextStyle: TextStyle(fontSize: 28.0, fontWeight: FontWeight.w700),
      bodyTextStyle: bodyStyle,
      descriptionPadding: EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 16.0),
      pageColor: Colors.white,
      imagePadding: EdgeInsets.zero,
    );

    var pageSlides = widget.helpDetail.slides;

    if (pageSlides.length == 0) {
      pageViews.add(
        PageViewModel(
            titleWidget: Row(
              children: <Widget>[
                Text(
                  isEng ? widget.helpDetail.title : widget.helpDetail.titlemm,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.black,
                  ),
                ),
                mainModel.isSysAdmin()
                    ? FlatButton(
                        textColor: Colors.blue,
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => SlideDataPage(
                                    manItem: widget.helpDetail,
                                    manIndex: widget.index)),
                          );
                        },
                        child: Icon(Icons.edit),
                        shape: CircleBorder(
                            side: BorderSide(color: Colors.transparent)),
                      )
                    : Container(),
              ],
            ),
            bodyWidget: Container(
              width: width,
              alignment: Alignment.center,
            ),
            decoration: pageDecoration),
      );
    }

    for (var i = 0; i < pageSlides.length; i++) {
      var instructions;
      if (isEng) {
        instructions = pageSlides[i].instructions;
      } else {
        instructions = pageSlides[i].instructionsmm;
      }

      var imageName;
      if (isEng) {
        imageName = '${manualModel.dataDir}/manual/img/' + pageSlides[i].image;
      } else {
        imageName =
            '${manualModel.dataDir}/manual/img/' + pageSlides[i].imagemm;
      }

      pageViews.add(
        PageViewModel(
            titleWidget: Row(
              children: <Widget>[
                Text(
                  isEng ? widget.helpDetail.title : widget.helpDetail.titlemm,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.black,
                  ),
                ),
                mainModel.isSysAdmin()
                    ? FlatButton(
                        textColor: Colors.blue,
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => SlideDataPage(
                                    manItem: widget.helpDetail,
                                    manIndex: widget.index)),
                          );
                        },
                        child: Icon(Icons.edit),
                        shape: CircleBorder(
                            side: BorderSide(color: Colors.transparent)),
                      )
                    : Container(),
              ],
            ),
            bodyWidget: Container(
              width: width,
              alignment: Alignment.center,
              child: Stack(
                alignment: AlignmentDirectional.topStart,
                children: instructionText(
                    context, isEng, imageName, imgHeight, width, instructions),
              ),
            ),
            decoration: pageDecoration),
      );
    }

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
          body: IntroductionScreen(
        pages: pageViews,
        onDone: () => _onIntroEnd(context),
        showSkipButton: true,
        skipFlex: 0,
        nextFlex: 0,
        skip: const Text('Skip'),
        next: const Icon(Icons.arrow_forward),
        done: const Text('Done', style: TextStyle(fontWeight: FontWeight.w600)),
        dotsDecorator: DotsDecorator(spacing: EdgeInsets.all(1.0)),
      )),
    );
  }
}