import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:signature/signature.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';

import '../../app_style/sizing.dart';
import '../loaders/image_loader.dart';

class ESignature extends StatefulWidget {
  final String oldSignature;
  final Uint8List newSignature;
  final Function(Uint8List) onSaved;
  final Function(Uint8List) onChange;
  final String title;
  const ESignature({Key key, this.title, this.oldSignature, this.onSaved, this.onChange, this.newSignature}) : super(key: key);

  @override
  State<ESignature> createState() => _ESignatureState();
}

class _ESignatureState extends State<ESignature> {
  // Initialise a controller. It will contains signature points, stroke width and pen color.
  final SignatureController _controller = SignatureController(
    penStrokeWidth: 2,
    penColor: Colors.black,
    exportBackgroundColor: Colors.white,
  );

  Uint8List signature;

  bool _editable = false;

  @override
  void initState() {
    if (widget.newSignature != null) {
      signature = widget.newSignature;
    } else if (widget.oldSignature != null || signature != null) {
      signature = Uint8List.fromList(widget.oldSignature.codeUnits);
    }
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (widget.oldSignature != null || signature != null)
          Container(
            width: MediaQuery.of(context).size.width,
            padding: const EdgeInsets.only(bottom: 8),
            height: 90 * AppStyle.getScaleFactor(context),
            child: signature != null ? Image.memory(signature) : ImageLoader(boxFit: BoxFit.contain, url: widget.oldSignature),
          ),
        FormField<String>(onSaved: (_) async {
          widget.onSaved(signature);
        }, builder: (FormFieldState<String> state) {
          return Column(
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth, vertical: 8.toScreenHeight),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: _editable ? const BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)) : BorderRadius.circular(10),
                  boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10)],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        widget.title.tinyFont(context).paddingOnly(top: 8),
                        (!_editable
                                ? "edit".toSvgAsset(width: 48).paddingOnly(top: 8)
                                : Container(
                                    width: 48.toScreenWidth,
                                    height: 48.toScreenWidth,
                                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(100), border: Border.all(color: AppColor.neutral30)),
                                    padding: const EdgeInsets.all(11),
                                    margin: const EdgeInsets.only(top: 8),
                                    child: "done".toSvgAsset(width: 26),
                                  ))
                            .onPress(() async {
                          if (_editable) {
                            signature = await _controller.toPngBytes();
                            if (widget.onChange != null) {
                              widget.onChange(signature);
                            }
                          }
                          _editable = !_editable;
                          setState(() {});
                        }),
                      ],
                    ),
                    AbsorbPointer(
                      absorbing: !_editable,
                      child: Signature(
                        controller: _controller,
                        height: 135.toScreenHeight,
                        width: MediaQuery.of(context).size.width - 64.toScreenWidth,
                        backgroundColor: Colors.transparent,
                      ),
                    ),
                  ],
                ),
              ),
              if (_editable)
                Container(
                  decoration: const BoxDecoration(
                    color: AppColor.neutral30,
                    borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
                  ),
                  child: Row(
                    children: [
                      "clear".toSvgAsset(width: 14).paddingOnly(start: 16).onPress(() {
                        _controller.clear();
                      }),
                      35.width,
                      "back".toSvgAsset(width: 17).onPress(() {
                        _controller.undo();
                      }),
                      27.width,
                      "redo".toSvgAsset(width: 17).onPress(() {
                        _controller.redo();
                      }),
                      // IconButton(
                      //     onPressed: () {
                      //       _unpaint = !_unpaint;
                      //       setState(() {});
                      //     },
                      //     icon: Icon(
                      //       _unpaint ? Icons.draw : Icons.ac_unit,
                      //       color: _unpaint ? AColors.orange : null,
                      //     )),
                      // const Spacer(),
                      // IconButton(
                      //     onPressed: () async {
                      //       signature = await _controller.toPngBytes();
                      //       if (widget.onChange != null) {
                      //         widget.onChange(signature);
                      //       }
                      //       setState(() {});
                      //     },
                      //     icon: const Icon(Icons.check)),
                    ],
                  ).paddingOnly(top: 12, bottom: 12),
                )
            ],
          );
        }),
      ],
    );
  }
}