import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:signature/signature.dart';
import 'package:test_sa/views/app_style/colors.dart';
import 'package:test_sa/views/app_style/sizing.dart';
import 'package:test_sa/views/widgets/loaders/image_loader.dart';

class ESignature extends StatefulWidget {
  final String oldSignature;
  final Uint8List newSignature;
  final Function(Uint8List) onSaved;
  final Function(Uint8List) onChange;
  const ESignature({Key key, 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 _unpaint = false;
  @override
  void initState() {
    if(widget.newSignature != null) {
      signature = widget.newSignature;
    }
    // TODO: implement initState
    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: const EdgeInsets.symmetric(
                        horizontal: 16
                    ),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(color:AColors.black),
                        borderRadius: BorderRadius.circular(
                            AppStyle.borderRadius * AppStyle.getScaleFactor(context)
                        ),
                        boxShadow: const [
                          AppStyle.boxShadow
                        ]
                    ),
                    child: AbsorbPointer(
                      absorbing: _unpaint,
                      child: Signature(
                        controller: _controller,
                        height: 160 * AppStyle.getScaleFactor(context),
                        backgroundColor: Colors.transparent,
                      ),
                    ),
                  ),
                  Row(
                    children: [
                      IconButton(onPressed: (){_controller.clear();}, icon: const Icon(Icons.clear)),
                      IconButton(onPressed: (){_controller.undo();}, icon: const Icon(Icons.undo)),
                      IconButton(onPressed: (){_controller.redo();}, icon: const Icon(Icons.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();
                        widget.onChange(signature);
                        setState(() {});
                        }, icon: const Icon(Icons.check)),
                    ],
                  )
                ],
              );
            }
        ),
      ],
    );
  }
}