import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as Path;
import 'package:provider/provider.dart';
import 'package:fcs/model/manual_model.dart';
import 'package:fcs/pages/manual/instruction_data_page.dart';
import 'package:fcs/vo/manual.dart';
import 'package:fcs/widget/img_file.dart';
import 'package:fcs/widget/local_text.dart';
import 'package:fcs/widget/progress.dart';

class SlideDataPage extends StatefulWidget {
  final ManualItem manItem;
  final int manIndex;

  SlideDataPage({this.manItem, this.manIndex});
  @override
  _SlideDataPageState createState() => _SlideDataPageState();
}

class _SlideDataPageState extends State<SlideDataPage> {
  File slideImageFile;
  List<SlideData> slideList = [];
  List<SlideData> _initSlideList = [];
  File imageFile;
  File engImgFile;
  File mmImgFile;
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
  }

  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 =
        SlideData(id: slideList.length, image: fileName, instructions: []);
    setState(() {
      slideList.add(slideData);
    });
    // manualModel.saveSlideData(widget.manIndex, slideList.length, slideData);
  }

  @override
  Widget build(BuildContext context) {
    var manualModel = Provider.of<ManualModel>(context);
    slideList = manualModel.getSlideList(widget.manIndex);

    final engImgBox = Container(
        padding: EdgeInsets.only(left: 20),
        child: Column(children: <Widget>[
          Text('English image'),
          ImageFile(
              imageSource: ImageSource.gallery,
              enabled: true,
              title: "Image",
              onFile: (file) {
                engImgFile = file;
              })
        ]));

    final mmImgBox = Container(
        padding: EdgeInsets.only(left: 20, top: 20),
        child: Column(children: <Widget>[
          Text('Myanmar image'),
          ImageFile(
              imageSource: ImageSource.gallery,
              enabled: true,
              title: "Image",
              onFile: (file) {
                mmImgFile = file;
              }),
        ]));

    final saveImages = Container(
        padding: EdgeInsets.only(left: 20, top: 20),
        child: FlatButton(
            onPressed: () {
              saveSlideImages(context, manualModel, widget.manIndex);
            },
            child: Text('Save')));

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Slide Data'),
        ),
        body: Container(
          child: GridView.builder(
            itemCount: slideList.length,
            itemBuilder: (BuildContext context, int index) {
              return Card(
                child: InkWell(
                  onTap: () => {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => InstructionDataPage(
                                  slideData: slideList[index],
                                  path: manualModel.dataDir,
                                  slideIndex: index,
                                  manIndex: widget.manIndex,
                                )))
                  },
                  child: Container(
                    child: Stack(
                      fit: StackFit.expand,
                      children: <Widget>[
                        Image.file(File('${manualModel.dataDir}/manual/img/' +
                            slideList[index].image)),
                        Positioned(
                          top: 0,
                          right: 0,
                          child: IconButton(
                              icon: Icon(Icons.delete),
                              onPressed: () {
                                setState(() {
                                  manualModel.deleteSlideData(
                                      widget.manIndex, slideList[index]);
                                });
                              }),
                        )
                      ],
                    ),
                  ),
                ),
              );
            },
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async => await _dialog(
              context, manualModel, engImgBox, mmImgBox, saveImages),
          tooltip: 'Pick Image',
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  Future<void> _dialog(BuildContext context, ManualModel manualModel,
      Widget engImg, Widget mmImg, Widget saveImgs) {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: Container(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[engImg, mmImg, saveImgs],
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  saveSlideImages(
      BuildContext context, ManualModel manualModel, int manIndex) async {
    var engFileName = Path.basename(engImgFile.path);
    var mmFileName = Path.basename(mmImgFile.path);
    var path = '${manualModel.dataDir}';
    File engImage = await engImgFile.copy('$path/manual/img/$engFileName');
    File mmImage = await mmImgFile.copy('$path/manual/img/$mmFileName');
    var length = slideList.toList().length;

    var slideData;
    if (length == 0) {
      slideData = SlideData(
          id: 1,
          image: engFileName,
          imagemm: mmFileName,
          instructions: [],
          instructionsmm: []);
    } else {
      dynamic max = slideList.first;
      slideList.forEach((e) {
        if (e.id > max.id) max = e;
      });
      slideData = SlideData(
          id: max.id + 1,
          image: engFileName,
          imagemm: mmFileName,
          instructions: [],
          instructionsmm: []);
    }
    manualModel.saveSlideData(manIndex, length, slideData);
    Navigator.pop(context);
  }
}