import 'package:crop/crop.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:flutter/material.dart';

class ImageCropper extends StatefulWidget {
  final Map<String, dynamic> data;

  const ImageCropper({Key? key, required this.data}) : super(key: key);

  @override
  State<ImageCropper> createState() => _ImageCropperState();
}

class _ImageCropperState extends State<ImageCropper> {
  double _rotation = 0;
  BoxShape shape = BoxShape.rectangle;

  final _controller = CropController();

  get _bytes => widget.data['bytes'];
  get _onCropped => widget.data['onCropped'];

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text('برش عکس'),
        centerTitle: true,
        actions: <Widget>[
          IconButton(
            onPressed: _cropImage,
            tooltip: 'Crop',
            icon: const Icon(Icons.crop),
          )
        ],
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.black,
              padding: const EdgeInsets.all(8),
              child: Crop(
                onChanged: (decomposition) {
                  if (_rotation != decomposition.rotation) {
                    setState(() {
                      _rotation = ((decomposition.rotation + 180) % 360) - 180;
                    });
                  }
                },
                controller: _controller,
                shape: shape,
                child: Image.memory(
                  _bytes,
                  fit: BoxFit.cover,
                ),
                helper: shape == BoxShape.rectangle
                    ? Container(
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.white, width: 2),
                        ),
                      )
                    : null,
              ),
            ),
          ),
          Row(
            children: <Widget>[
              IconButton(
                icon: const Icon(Icons.redo),
                tooltip: 'برگرداندن',
                onPressed: () {
                  _controller.rotation = 0;
                  _controller.scale = 1;
                  _controller.offset = Offset.zero;
                  setState(() {
                    _rotation = 0;
                  });
                },
              ),
              Expanded(
                child: SliderTheme(
                  data: theme.sliderTheme.copyWith(
                    trackShape: const RectangularSliderTrackShape(),
                  ),
                  child: Slider(
                    thumbColor: Theme.of(context).colorScheme.title,
                    divisions: 360,
                    value: _rotation,
                    min: -180,
                    max: 180,
                    label: '$_rotation°',
                    onChanged: (n) {
                      setState(() {
                        _rotation = n.roundToDouble();
                        _controller.rotation = _rotation;
                      });
                    },
                  ),
                ),
              ),
              // PopupMenuButton<BoxShape>(
              //   icon: const Icon(Icons.crop_free),
              //   itemBuilder: (context) => [
              //     const PopupMenuItem(
              //       child: Text("Box"),
              //       value: BoxShape.rectangle,
              //     ),
              //     const PopupMenuItem(
              //       child: Text("Oval"),
              //       value: BoxShape.circle,
              //     ),
              //   ],
              //   tooltip: 'Crop Shape',
              //   onSelected: (x) {
              //     setState(() {
              //       shape = x;
              //     });
              //   },
              // ),
              // PopupMenuButton<double>(
              //   icon: const Icon(Icons.aspect_ratio),
              //   itemBuilder: (context) => [
              //     const PopupMenuItem(
              //       child: Text("Original"),
              //       value: 1000 / 667.0,
              //     ),
              //     const PopupMenuDivider(),
              //     const PopupMenuItem(
              //       child: Text("16:9"),
              //       value: 16.0 / 9.0,
              //     ),
              //     const PopupMenuItem(
              //       child: Text("4:3"),
              //       value: 4.0 / 3.0,
              //     ),
              //     const PopupMenuItem(
              //       child: Text("1:1"),
              //       value: 1,
              //     ),
              //     const PopupMenuItem(
              //       child: Text("3:4"),
              //       value: 3.0 / 4.0,
              //     ),
              //     const PopupMenuItem(
              //       child: Text("9:16"),
              //       value: 9.0 / 16.0,
              //     ),
              //   ],
              //   tooltip: 'Aspect Ratio',
              //   onSelected: (x) {
              //     _controller.aspectRatio = x;
              //     setState(() {});
              //   },
              // ),
            ],
          ),
        ],
      ),
    );
  }

  void _cropImage() async {
    final pixelRatio = MediaQuery.of(context).devicePixelRatio;
    final cropped = await _controller.crop(pixelRatio: pixelRatio);

    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => Scaffold(
          appBar: AppBar(
            title: const Text('تایید برش'),
            centerTitle: true,
            actions: [
              Builder(
                builder: (context) => IconButton(
                  icon: const Icon(
                    DidvanIcons.check_circle_solid,
                    size: 32,
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                    Navigator.of(context).pop();
                    _onCropped();
                  },
                ),
              ),
            ],
          ),
          body: Center(
            child: RawImage(
              image: cropped,
            ),
          ),
        ),
        fullscreenDialog: true,
      ),
    );
  }
}