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();
                        if (widget.onChange != null) {
                          widget.onChange(signature);
                        }
                        setState(() {});
                      },
                      icon: const Icon(Icons.check)),
                ],
              )
            ],
          );
        }),
      ],
    );
  }
}
