import 'dart:ui' as ui;

import 'package:cims_apps/application/component/button/back_button_view.dart';
import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/component/list_tile/list_tile_view.dart';
import 'package:cims_apps/application/component/text_caption/text_caption.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/auth/registration/view/submission_data/submission_parent.dart';
import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';

class SubmitSignature extends StatelessWidget {
  const SubmitSignature({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    GlobalKey<SfSignaturePadState> signaturePadKey = GlobalKey();
    return ChangeNotifierProvider(
        create: (context) => SubmissionDataViewModel(),
        builder: (context, child) {
          return Scaffold(
            appBar: AppBar(
              toolbarHeight: 70,
              backgroundColor: Colors.white,
              surfaceTintColor: Colors.white,
              automaticallyImplyLeading: false,
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const BackButtonView(),
                  const Text('Registration'),
                  SizedBox(
                    width: SizeConfig.width * 0.1,
                  )
                ],
              ),
              shape: const RoundedRectangleBorder(
                  side: BorderSide(color: ColorPalette.slate200)),
            ),
            body: Container(
              padding: const EdgeInsets.all(16.0),
              child: Consumer<SubmissionDataViewModel>(
                  builder: (context, provider, child) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const TextCaption(title: 'Draw your digital sign'),
                    SizedBox(
                      height: SizeConfig.height * .28,
                      child: DottedBorder(
                        color: ColorPalette.primary,
                        borderType: BorderType.RRect,
                        radius: const Radius.circular(8),
                        padding: const EdgeInsets.all(6),
                        strokeWidth: 2.0,
                        dashPattern: const [14, 0, 0, 8],
                        child: SfSignaturePad(
                          key: signaturePadKey,
                          backgroundColor: Colors.white,
                        ),
                      ),
                    ),
                    const ListTileView(
                        title:
                            'Make sure the sign you draw is match with your ID Card'),
                    const Spacer(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        ButtonView(
                          name: 'Delete',
                          isOutlined: true,
                          width: SizeConfig.width * .42,
                          onPressed: () {
                            signaturePadKey.currentState?.clear();
                          },
                        ),
                        ButtonView(
                          name: 'Next',
                          width: SizeConfig.width * .42,
                          onPressed: () async {
                            // ui.Image image = await _signaturePadKey.currentState!.toImage();
                            routePush(context, page: const SubmissionParent());
                          },
                        ),
                      ],
                    )
                  ],
                );
              }),
            ),
          );
        });
  }
}
