import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.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/moveable_stack_item.dart';
import 'package:fcs/theme/theme.dart';
import 'package:fcs/vo/manual.dart';
import 'package:path/path.dart' as Path;
import 'package:fcs/widget/progress.dart';

class InstructionDataPage extends StatefulWidget {
  final SlideData slideData;
  final String path;
  final int slideIndex;
  final int manIndex;

  InstructionDataPage(
      {this.slideData, this.path, this.slideIndex, this.manIndex});
  @override
  _InstructionDataPageState createState() => _InstructionDataPageState();
}

class _InstructionDataPageState extends State<InstructionDataPage> {
  String selectedLanguage;
  File slideImageFile;
  bool isEng;
  List<bool> _selection = List.generate(2, (_) => false);
  String imgName;
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    isEng = true;
  }

  @override
  Widget build(BuildContext context) {
    var manualModel = Provider.of<ManualModel>(context);
    if (isEng) {
      imgName = widget.slideData.image;
    } else {
      imgName = widget.slideData.imagemm;
    }

    var screenSize = MediaQuery.of(context).size;
    var width = screenSize.width;
    var imgWidth = width - (width * 0.15);
    var height = screenSize.height;
    var imgHeight = height - (height * 0.29);

    var toggleButtons = Container(
        child: ToggleButtons(
      children: <Widget>[
        Row(
          children: <Widget>[
            Image.asset(
              "assets/eng_flag.png",
              width: 25,
            ),
            Text(
              "English",
              style:
                  TextStyle(color: this.isEng ? secondaryColor : Colors.black),
            )
          ],
        ),
        Container(
          padding: EdgeInsets.only(left: 10, right: 10),
          child: Row(
            children: <Widget>[
              Image.asset(
                "assets/myan_flag.png",
                width: 25,
              ),
              Container(
                padding: EdgeInsets.only(left: 10),
                child: Text(
                  "မြန်မာ",
                  style: TextStyle(
                      color: !this.isEng ? secondaryColor : Colors.black,
                      fontFamily: "MyanmarUnicode"),
                ),
              )
            ],
          ),
        )
      ],
      renderBorder: false,
      isSelected: _selection,
      selectedColor: secondaryColor,
      onPressed: (int index) {
        setState(() {
          _selection[index] = !_selection[index];
          if (index == 0) {
            this.isEng = true;
          } else {
            this.isEng = false;
          }
        });
      },
    ));

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Instruction Data'),
          actions: <Widget>[toggleButtons],
        ),
        body: Container(
          alignment: Alignment.topCenter,
          child: Stack(
            children: <Widget>[
              Container(
                child: Stack(
                  children: instructionData(
                      context, imgWidth, imgHeight, manualModel),
                ),
              ),
              Positioned(
                top: 0,
                right: 0,
                child: IconButton(
                    icon: Icon(Icons.image),
                    onPressed: () {
                      pickImageFromGallery(ImageSource.gallery, manualModel);
                    }),
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            addInstructionData();
          },
          tooltip: 'Pick Image',
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  addInstructionData() {
    var instructionList =
        isEng ? widget.slideData.instructions : widget.slideData.instructionsmm;
    Instruction inst;
    if (instructionList.toList().length == 0) {
      inst = Instruction(
        id: 1,
        text: '',
        left: 0.0,
        top: 0.0,
      );
    } else {
      dynamic max = instructionList.first;
      instructionList.forEach((e) {
        if (e.id > max.id) max = e;
      });
      inst = Instruction(
        id: max.id + 1,
        text: '',
        left: 0.0,
        top: 0.0,
      );
    }

    setState(() {
      if (isEng) {
        widget.slideData.instructions.add(inst);
      } else {
        widget.slideData.instructionsmm.add(inst);
      }
    });
  }

  instructionData(
      BuildContext context, double imgW, double imgH, ManualModel manualModel) {
    List<Widget> textFields = [];
    textFields.add(
      Image.file(
        File('${widget.path}/manual/img/' + imgName),
        alignment: AlignmentDirectional.topCenter,
        height: imgH,
        width: imgW,
      ),
    );
    var instructionList =
        isEng ? widget.slideData.instructions : widget.slideData.instructionsmm;
    if (instructionList.length != 0) {
      instructionList.asMap().forEach((k, instruction) {
        MoveableStackItem mitem = MoveableStackItem(
          instruction: instruction,
          manIndex: widget.manIndex,
          slideIndex: widget.slideIndex,
          instIndex: k,
          isEng: this.isEng,
          key: Key(this.isEng.toString() + k.toString()),
        );

        textFields.add(mitem);
      });
    }
    return textFields;
  }

  pickImageFromGallery(ImageSource source, ManualModel manualModel) async {
    File tempImage = await ImagePicker.pickImage(
        source: source, imageQuality: 80, maxWidth: 300);

    var fileName = Path.basename(tempImage.path);
    var path = '${manualModel.dataDir}';
    File newImage = await tempImage.copy('$path/manual/img/$fileName');
    var slideData = widget.slideData;
    if (this.isEng) {
      slideData.image = fileName;
    } else {
      slideData.imagemm = fileName;
    }

    manualModel.changeSlideImage(widget.manIndex, widget.slideIndex, slideData);
  }
}