import 'package:flutter/material.dart';

import 'package:flutter_native_image/flutter_native_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_picker/image_picker.dart';
import 'package:one_key/widgets/MyDivider.dart';
import 'package:one_key/widgets/h_empty_view.dart';
import 'package:one_key/widgets/round_button.dart';

import 'package:one_key/widgets/system_app_bar.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:provider/provider.dart';

import '../../models/upload_img_model.dart';
import '../../provider/upload_img_provider.dart';
import '../../res/colors.dart';
import '../../utils/screen_util.dart';
import '../../utils/upload_image_util.dart';
import '../../utils/utils.dart';
import 'dart:io';

/**
 * 预订信息模块设置-自定义图文默认
 */

class AdditionModel {
  String content;
  String type; // 1图片 2文本
  // int order; //顺序
  UploadImgModel image;
  TextEditingController infoC = TextEditingController();

  AdditionModel();

  factory AdditionModel.fromJson(Map<String, dynamic> json) => AdditionModel()
    ..content = json["content"]
    ..type = json["type"];
  // ..order = json['order'];

  Map<String, dynamic> toJson() => <String, dynamic>{
        "content": content, "type": type,
        //  'order': order
      };
}

class InvicationAdditionPage extends StatefulWidget {
  InvicationAdditionPage();

  @override
  State<InvicationAdditionPage> createState() => _InvicationAdditionPageState();
}

class _InvicationAdditionPageState extends State<InvicationAdditionPage> {
  TextEditingController titleC = TextEditingController();
  List<AdditionModel> data = [];
  UploadImageProvider _uploadImageProvider;
  final picker = ImagePicker();
  ScrollController controller = ScrollController();

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

    // AdditionModel additionModel = AdditionModel();
    // additionModel.content =
    //     'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641';
    // additionModel.type = '1';
    // additionModel.order = 0;
    // additionModel.image = UploadImgModel();
    // additionModel.image.process = 1;
    // additionModel.image.qiniuUrl =
    //     'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641';

    // AdditionModel additionModel1 = AdditionModel();
    // additionModel1.content = 'webenkjfkdfjakdfjaldfkjaldfjaldf';
    // additionModel1.type = '2';
    // additionModel1.order = 1;

    // data.add(additionModel);
    // data.add(additionModel1);

    WidgetsBinding.instance.addPostFrameCallback((_) async {
      _getQiniuInfo();
    });
  }

  ///获取七牛云token
  ///
  _getQiniuInfo() async {
    await _uploadImageProvider.getQiniuInfo(context, {});
  }

  @override
  void dispose() {
    super.dispose();
    _uploadImageProvider.tableImageList = [];
  }

  ///#相机拍照，单图选择
  Future _getFromPictureOrCamera(int index, imageSource) async {
    final pickedFile = await picker.pickImage(source: imageSource);
    File compressedFile = await FlutterNativeImage.compressImage(
        pickedFile.path,
        quality: 50,
        percentage: 50);
    UploadImgModel imgModel = _uploadImageProvider.getDynamicValue('${index}');
    setState(() {
      if (pickedFile != null) {
        imgModel.file = File(pickedFile.path);
        imgModel.process = 0.01;
      } else {
        print('No image selected.');
      }
    });
    if (pickedFile != null) {
      // if (title == '头像') {
      //   _uploadImageProvider.imgSizeTouxiang = 76;
      //   _uploadImageProvider.touxiang.qiniuUrl = null;
      // } else {
      // _uploadImageProvider.imgSizeErweima = 76;
      imgModel.qiniuUrl = null;
      // }
      bool need = await Utils.sizeNeed(File(pickedFile.path));
      File file = File(pickedFile.path);
      if (need) {
        file = File(compressedFile.absolute.path);
      }
      UploadImageUtil().startUploadOnlyAddition(
          context, file, index, true, _uploadImageProvider, () {
        UploadImgModel imgModel =
            _uploadImageProvider.getDynamicValue('${index}');
        AdditionModel additionModel = AdditionModel();
        additionModel.content = imgModel.qiniuUrl;
        additionModel.type = '1';
        // additionModel.order = index;
        additionModel.image = imgModel;
        // additionModel.image.process = 1;
        // additionModel.image.qiniuUrl =
        //     'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641';

        data[index] = additionModel;
        setState(() {});
      });
    }
  }

  ///添加图片UI弹出
  Future _openModalBottomSheet(context, int index) async {
    final option = await showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        isDismissible: false,
        builder: (BuildContext context) {
          return Container(
            // height: ScreenUtil().setWidth(180 * 2),
            decoration: BoxDecoration(
                color: MyColours.color_ffffff,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(ScreenUtil().setWidth(24)),
                    topRight: Radius.circular(ScreenUtil().setWidth(24)))),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                InkWell(
                  onTap: () {
                    Utils.getPickPermission(context, () {
                      _getFromPictureOrCamera(index, ImageSource.camera);
                      Navigator.pop(context);
                    },
                        Platform.isAndroid
                            ? Permission.storage
                            : Permission.photos);
                  },
                  child: Container(
                      width: double.infinity,
                      height: ScreenUtil().setWidth(58 * 2),
                      child: Center(
                        child: Text(
                          '拍摄',
                          style: TextStyle(
                              fontSize: ScreenUtil().setSp(32),
                              color: MyColours.color_353535,
                              fontWeight: FontWeight.bold),
                        ),
                      )),
                ),
                MyDivider(
                  double.infinity,
                  ScreenUtil().setWidth(2),
                  color: MyColours.color_EEEEEE,
                ),
                InkWell(
                  onTap: () {
                    // Utils.getPickPermission(context, () {
                    //   // pickAsset(RequestType.image);
                    //   _getFromPictureOrCamera(
                    //       _uploadImageProvider.firstImage, ImageSource.gallery);
                    //   Navigator.pop(context);
                    // },
                    //     Platform.isAndroid
                    //         ? Permission.storage
                    //         : Permission.photos);

                    Utils.getPickPermission(context, () {
                      _getFromPictureOrCamera(index, ImageSource.gallery);
                      Navigator.pop(context);
                    },
                        Platform.isAndroid
                            ? Permission.storage
                            : Permission.photos);
                  },
                  child: Container(
                      width: double.infinity,
                      height: ScreenUtil().setWidth(58 * 2),
                      child: Center(
                        child: Text(
                          '从相册选择',
                          style: TextStyle(
                              fontSize: ScreenUtil().setSp(32),
                              color: MyColours.color_353535,
                              fontWeight: FontWeight.bold),
                        ),
                      )),
                ),
                MyDivider(
                  double.infinity,
                  ScreenUtil().setWidth(10),
                  color: MyColours.color_EEEEEE,
                ),
                InkWell(
                    onTap: () {
                      Navigator.pop(context, '取消');
                    },
                    child: Container(
                        width: double.infinity,
                        height: ScreenUtil().setWidth(58 * 2),
                        child: Center(
                          child: Text(
                            '取消',
                            style: TextStyle(
                                fontSize: ScreenUtil().setSp(32),
                                color: MyColours.color_353535,
                                fontWeight: FontWeight.bold),
                          ),
                        )))
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    _uploadImageProvider =
        Provider.of<UploadImageProvider>(context, listen: true);
    return Scaffold(
        backgroundColor: MyColours.color_ffffff,
        appBar: SystemAppBar('自定义图文'),
        body: Column(
          children: [
            Expanded(
                child: SingleChildScrollView(
                    controller: controller,
                    child: Column(
                      children: [
                        Container(
                          padding: EdgeInsets.symmetric(
                              horizontal: w(16), vertical: w(12)),
                          child: Row(
                            children: [
                              Text(
                                '区域标题',
                                style: TextStyle(
                                    color: MyColours.color_515151,
                                    fontSize: font(16)),
                              ),
                              // HEmptyView(44),

                              Expanded(
                                  child: Container(
                                height: w(24),
                                // color: Colors.red,
                                child: TextField(
                                    controller: titleC,
                                    textAlign: TextAlign.right,
                                    // focusNode: _cusdemNode,
                                    style: TextStyle(
                                      color: MyColours.color_515151,
                                      fontSize: ScreenUtil().setSp(32),
                                      // textBaseline: TextBaseline.alphabetic
                                    ),
                                    // textAlignVertical: TextAlignVertical.center,
                                    maxLines: 1,
                                    // inputFormatters: [
                                    //   LengthLimitingTextInputFormatter(10), // 设置输入长度限制
                                    // ],
                                    decoration: InputDecoration(
                                      hintText: "点击输入区域标题（不超过10个字）",
                                      hintStyle: TextStyle(
                                        color: MyColours.color_999999,
                                        fontSize: ScreenUtil().setSp(32),
                                      ),
                                      contentPadding: EdgeInsets.zero,
                                      border: OutlineInputBorder(
                                          borderSide: BorderSide.none),
                                    ),
                                    keyboardType: TextInputType.text,
                                    onChanged: (value) {}),
                              ))
                            ],
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(left: w(16)),
                          child: MyDivider(
                            double.infinity,
                            w(0.5),
                            color: MyColours.color_E7E7E7,
                          ),
                        ),
                        // Expanded(
                        // child:
                        Padding(
                            padding: EdgeInsets.symmetric(
                                // horizontal: ScreenUtil().setWidth(32),
                                vertical: ScreenUtil().setWidth(26)),
                            child: ReorderableListView(
                              shrinkWrap: true,
                              scrollController: controller,
                              children: <Widget>[
                                for (AdditionModel item in data)
                                  item.type == '1'
                                      ? item.image.qiniuUrl == null &&
                                              item.image.file == null
                                          ? SizedBox()
                                          : Container(
                                              key: ValueKey(item),
                                              child: InkWell(
                                                  onTap: () {
                                                    // double process;
                                                    // String qiniuUrl;
                                                    // List<String> tempList = [];
                                                    // // if (title == '头像') {
                                                    // process = item.image.process;
                                                    // qiniuUrl = item.image.qiniuUrl;
                                                    // // } else {
                                                    // //   process = _uploadImageProvider.erweima.process;
                                                    // //   qiniuUrl = _uploadImageProvider.erweima.qiniuUrl;
                                                    // // }

                                                    // if (qiniuUrl != null &&
                                                    //     qiniuUrl != '') {
                                                    //   // tempList.add(qiniuUrl);

                                                    //   // ///没有上传完成的不可以点击
                                                    //   // _showPhotoView(context, 0, tempList);

                                                    //   // _uploadImageProvider.firstImage.qiniuUrl = null;
                                                    //   // _uploadImageProvider.firstImage.process = 0;
                                                    //   // setState(() {});
                                                    //   _openModalBottomSheet(context);
                                                    //   // Utils.getPickPermission(context, () {
                                                    //   //   _getFromPictureOrCamera(
                                                    //   //       _uploadImageProvider.firstImage,
                                                    //   //       ImageSource.gallery);
                                                    //   // },
                                                    //   //     Platform.isAndroid
                                                    //   //         ? Permission.storage
                                                    //   //         : Permission.photos);
                                                    // }
                                                  },
                                                  child: Stack(
                                                      alignment: Alignment
                                                          .bottomCenter,
                                                      children: [
                                                        Stack(
                                                            clipBehavior:
                                                                Clip.none,
                                                            children: [
                                                              item.image.qiniuUrl !=
                                                                          null &&
                                                                      item.image
                                                                              .qiniuUrl !=
                                                                          ''
                                                                  ? Image
                                                                      .network(
                                                                      item.image
                                                                          .qiniuUrl,
                                                                      fit: BoxFit
                                                                          .contain,
                                                                      width: double
                                                                          .infinity,
                                                                      // width: ScreenUtil()
                                                                      //     .setWidth(imgSize * 2),
                                                                      // height: ScreenUtil().setWidth(
                                                                      //     _uploadImageProvider
                                                                      //             .imgSizefirstImage *
                                                                      //         2),
                                                                    )
                                                                  : Image.file(
                                                                      item.image
                                                                          .file,
                                                                      fit: BoxFit
                                                                          .contain,
                                                                      width: double
                                                                          .infinity,
                                                                      // width: ScreenUtil()
                                                                      //     .setWidth(imgSize * 2),
                                                                      // height: ScreenUtil().setWidth(
                                                                      //     _uploadImageProvider
                                                                      //             .imgSizefirstImage *
                                                                      //         2),
                                                                    ),
                                                              Positioned(
                                                                  left: 0,
                                                                  top: 0,
                                                                  child: (item.image.file != null) &&
                                                                          item.image.process !=
                                                                              1 &&
                                                                          item.image.process !=
                                                                              0.01
                                                                      ? Container(
                                                                          width:
                                                                              ScreenUtil().screenWidth,
                                                                          height:
                                                                              w(_uploadImageProvider.imgSizefirstImage),
                                                                          color:
                                                                              MyColours.color_4D000000,
                                                                          child:
                                                                              Center(
                                                                            child:
                                                                                Text('上传中', style: TextStyle(color: MyColours.color_F8F9FD)),
                                                                          ),
                                                                        )
                                                                      : Container()),
                                                            ]),
                                                        // item.image.process == 1
                                                        //     ? Container(
                                                        //         width: w(150),
                                                        //         height: w(30),
                                                        //         color: MyColours.color_4D000000,
                                                        //         alignment: Alignment.center,
                                                        //         child: Text(
                                                        //           '点击图片可以更换',
                                                        //           style: TextStyle(
                                                        //               color: MyColours
                                                        //                   .color_F8F9FD,
                                                        //               fontSize: font(14),
                                                        //               fontWeight:
                                                        //                   FontWeight.bold),
                                                        //         ))
                                                        //     : SizedBox(),
                                                        item.image.process == 1
                                                            ? Positioned(
                                                                top: w(15),
                                                                right: w(15),
                                                                child: InkWell(
                                                                    onTap: () {
                                                                      data.remove(
                                                                          item);
                                                                      setState(
                                                                          () {});
                                                                    },
                                                                    child: Container(
                                                                        width: w(
                                                                            30),
                                                                        height: w(
                                                                            30),
                                                                        color: Colors
                                                                            .transparent,
                                                                        alignment:
                                                                            Alignment
                                                                                .center,
                                                                        child: Image.asset(
                                                                            Utils.getImgPath('add_close')))))
                                                            : SizedBox(),
                                                      ])))
                                      : Container(
                                          key: ValueKey(item),
                                          decoration: BoxDecoration(
                                              border: Border.all(
                                                  width: w(1),
                                                  color:
                                                      MyColours.color_DBDBDB)),
                                          // child: Text(item.content),

                                          // color: Colors.red,
                                          child: Stack(
                                            children: [
                                              Container(
                                                  // height: w(152),
                                                  decoration: BoxDecoration(
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              r(5)),
                                                      border: Border.all(
                                                          width: w(1),
                                                          color: MyColours
                                                              .color_DBDBDB)),
                                                  margin: EdgeInsets.only(
                                                      left: w(10),
                                                      top: w(10),
                                                      bottom: w(10),
                                                      right: w(60)),
                                                  padding: EdgeInsets.only(
                                                      top: w(16),
                                                      bottom: w(16),
                                                      left: w(14),
                                                      right: w(10)),
                                                  child: TextField(
                                                      controller: item.infoC,
                                                      // textAlign: TextAlign.right,
                                                      // focusNode: _cusdemNode,
                                                      style: TextStyle(
                                                        color: MyColours
                                                            .color_515151,
                                                        fontSize: ScreenUtil()
                                                            .setSp(28),
                                                        // textBaseline: TextBaseline.alphabetic
                                                      ),
                                                      // textAlignVertical: TextAlignVertical.center,
                                                      maxLines: 5,
                                                      maxLength: 50,
                                                      // inputFormatters: [
                                                      //   LengthLimitingTextInputFormatter(10), // 设置输入长度限制
                                                      // ],
                                                      decoration:
                                                          InputDecoration(
                                                        hintText: "点击录入文字",
                                                        hintStyle: TextStyle(
                                                          color: MyColours
                                                              .color_999999,
                                                          fontSize: ScreenUtil()
                                                              .setSp(28),
                                                        ),
                                                        contentPadding:
                                                            EdgeInsets.zero,
                                                        border:
                                                            OutlineInputBorder(
                                                                borderSide:
                                                                    BorderSide
                                                                        .none),
                                                      ),
                                                      keyboardType:
                                                          TextInputType.text,
                                                      onChanged: (value) {
                                                        item.content = value;
                                                      })),
                                              Positioned(
                                                  top: w(10),
                                                  right: w(10),
                                                  child: InkWell(
                                                      onTap: () {
                                                        data.remove(item);
                                                        setState(() {});
                                                      },
                                                      child: Container(
                                                          width: w(30),
                                                          height: w(30),
                                                          color: Colors
                                                              .transparent,
                                                          alignment:
                                                              Alignment.center,
                                                          child: Image.asset(
                                                              Utils.getImgPath(
                                                                  'add_close_b')))))
                                            ],
                                          ),
                                        ),
                              ],
                              onReorder: (int oldIndex, int newIndex) async {
                                if (oldIndex < newIndex) {
                                  newIndex -= 1;
                                }

                                // var childold = tableManagerModel.areas[oldIndex];
                                // Map<String, String> params = {
                                //   'sid': Provider.of<UserModel>(context, listen: false)
                                //       .user
                                //       .sellerid,
                                //   'regionid': childold.rid,
                                //   'order_o': tableManagerModel.areas[newIndex].orderId,
                                //   'sort': oldIndex < newIndex ? '2' : '1'
                                // };
                                var child = data.removeAt(oldIndex);
                                data.insert(newIndex, child);
                                setState(() {});
                                // await tableManagerModel.sortByRegion(context, params);
                                // //刷新前一页数据
                                // bus.emit('refresh_table_area');
                              },
                            )),
                        Container(
                          padding: EdgeInsets.only(top: w(15)),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              InkWell(
                                  onTap: () {
                                    UploadImgModel uploadImgModel =
                                        UploadImgModel(); //图
                                    _uploadImageProvider.setDynamicValue(
                                        '${data.length}', uploadImgModel);

                                    AdditionModel additionModel =
                                        AdditionModel();
                                    // additionModel.content = imgModel.qiniuUrl;
                                    additionModel.type = '1';
                                    // additionModel.order = data.length;
                                    additionModel.image = uploadImgModel;
                                    // additionModel.image.process = 1;
                                    // additionModel.image.qiniuUrl =
                                    //     'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641';

                                    data.add(additionModel);
                                    _openModalBottomSheet(
                                        context, data.length - 1);
                                  },
                                  child: Container(
                                    width: w(77),
                                    height: w(34),
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular(r(5)),
                                        border: Border.all(
                                            width: w(1),
                                            color: MyColours.color_438E93)),
                                    child: Text(
                                      '+图片',
                                      style: TextStyle(
                                          color: MyColours.color_000000,
                                          fontSize: font(14)),
                                    ),
                                  )),
                              HEmptyView(20),
                              InkWell(
                                  onTap: () {
                                    AdditionModel additionModel1 =
                                        AdditionModel();
                                    // additionModel1.content =
                                    //     'webenkjfkdfjakdfjaldfkjaldfjaldf';
                                    additionModel1.type = '2';
                                    // additionModel1.order = data.length;

                                    data.add(additionModel1);
                                    setState(() {});
                                  },
                                  child: Container(
                                    width: w(77),
                                    height: w(34),
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular(r(5)),
                                        border: Border.all(
                                            width: w(1),
                                            color: MyColours.color_438E93)),
                                    child: Text(
                                      '+文字',
                                      style: TextStyle(
                                          color: MyColours.color_000000,
                                          fontSize: font(14)),
                                    ),
                                  )),
                            ],
                          ),
                        )
                        // )
                      ],
                    ))),
            Container(
              padding: EdgeInsets.symmetric(horizontal: w(24), vertical: w(35)),
              child: Row(
                children: [
                  RoundButton(
                    text: '返回',
                    width: w(100),
                    height: w(43),
                    radius: r(5),
                    fontSize: 32,
                    isBold: true,
                    gradientStart: MyColours.color_ffffff,
                    gradientEnd: MyColours.color_ffffff,
                    textColor: MyColours.color_438E93,
                    borderColor: MyColours.color_438E93,
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                  HEmptyView(24),
                  Expanded(
                      child: RoundButton(
                    text: '保存并返回',
                    height: w(43),
                    radius: r(5),
                    isBold: true,
                    fontSize: 32,
                    gradientStart: MyColours.color_438E93,
                    gradientEnd: MyColours.color_438E93,
                    textColor: MyColours.color_ffffff,
                    borderColor: MyColours.color_438E93,
                    onPressed: () {
                      // _createReserveDeposit();
                      print(data);
                      print(titleC.text);
                      print(data);
                    },
                  )),
                ],
              ),
            )
          ],
        ));
  }
}