import 'dart:io';

import 'package:flutter/material.dart';
import 'package:qhd_prevention/customWidget/ItemWidgetFactory.dart';
import 'package:qhd_prevention/customWidget/custom_button.dart';
import 'package:qhd_prevention/customWidget/single_image_viewer.dart';
import 'package:qhd_prevention/customWidget/toast_util.dart';
import 'package:qhd_prevention/pages/mine/mine_sign_page.dart';
import 'package:qhd_prevention/pages/my_appbar.dart';
import 'package:qhd_prevention/services/SessionService.dart';
import 'package:qhd_prevention/tools/tools.dart';
import 'package:webview_flutter/webview_flutter.dart';


class SignInstructionsWebview extends StatefulWidget {
  final String url;
  final String name;

  const SignInstructionsWebview({Key? key, required this.url, required this.name,}) : super(key: key);

  @override
  State<SignInstructionsWebview> createState() => _SignInstructionsWebviewState(name);

  // _SignInstructionsWebviewState(this.name);
}

class _SignInstructionsWebviewState extends State<SignInstructionsWebview> {
  late final WebViewController _controller;
  final String name;
  ValueNotifier<double> loadingProgress = ValueNotifier(0.0);
  ValueNotifier<bool> isLoading = ValueNotifier(true);

  _SignInstructionsWebviewState(this.name);

  List<String> signImages = [];



  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onProgress: (progress) {
          loadingProgress.value = progress / 100;
          if (progress == 100) isLoading.value = false;
        },
        onPageStarted: (url) => isLoading.value = true,
        onPageFinished: (url) => isLoading.value = false,
      ))
      ..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return
      Container(
        color: Colors.white,
        padding: EdgeInsets.only(bottom: 10),
        child: Column(
          children: [
            MyAppbar(title: name,onBackPressed: () async {
              if (await _controller.canGoBack()) {
                _controller.goBack();
              } else{
                Navigator.of(context).pop();
              }
            },),
            Expanded( child: WebViewWidget(controller: _controller),),
            // ValueListenableBuilder<bool>(
            //   valueListenable: isLoading,
            //   builder: (context, loading, _) {
            //     return loading
            //         ? const Center(child: CircularProgressIndicator())
            //         : const SizedBox();
            //   },
            // ),

            SizedBox(height: 5,),

            Container(
              padding: EdgeInsets.symmetric(horizontal: 12),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  ListItemFactory.headerTitle('签字：', isRequired: true),
                  CustomButton(
                    text: signImages.isNotEmpty ? '重新签字' : '手写签字',
                    height: 36,
                    backgroundColor: Colors.blue,
                    onPressed: _sign,
                  ),
                ],
              ),
            ),

            if (signImages.isNotEmpty) _signListWidget(),

            SizedBox(height: 10,),
            CustomButton(
              text: '完成',
              margin: EdgeInsets.symmetric(horizontal: 10),
              padding: const EdgeInsets.symmetric(
                vertical: 10,
                horizontal: 10,
              ),
              height: 40,
              backgroundColor: Colors.blue,
              onPressed: () {
                if( signImages.isEmpty){
                  ToastUtil.showNormal(context, '请先签字');
                }

                Navigator.pop(context, signImages[0]);
              },
            ),

          ],

        ),
      );


  }


  Widget _signListWidget() {
    return Column(
      children:
      signImages.map((path) {
        return Column(
          children: [
            const SizedBox(height: 15),
            // const Divider(),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  child: // 用一个 ConstrainedBox 限制最大尺寸，并改为 BoxFit.contain
                  ConstrainedBox(
                    constraints: const BoxConstraints(
                      maxWidth: 200,
                      maxHeight: 150,
                    ),
                    child: Image.file(
                      File(path),
                      // 改为完整显示
                      fit: BoxFit.contain,
                    ),
                  ),
                  onTap: () {
                    presentOpaque(
                      SingleImageViewer(imageUrl: path),
                      context,
                    );
                  },
                ),
                Column(
                  children: [
                    Container(
                      padding: const EdgeInsets.only(right: 5),
                      child: CustomButton(
                        text: 'X',
                        height: 30,
                        padding: const EdgeInsets.symmetric(horizontal: 10),
                        backgroundColor: Colors.red,
                        onPressed: () {
                          setState(() {
                            signImages.remove(path);
                          });
                        },
                      ),
                    ),
                    const SizedBox(height: 80),
                  ],
                ),
              ],
            ),
          ],
        );
      }).toList(),
    );
  }


  /// 签字
  Future<void> _sign() async {

    await NativeOrientation.setLandscape();
    final path = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => MineSignPage()),
    );
    await NativeOrientation.setPortrait();
    if (path != null) {
      setState(() {
        signImages = [];
        signImages.add(path);
      });
    }
  }


}