import 'package:flutter/material.dart';

/// Flutter code sample for [Draggable].

void main() => runApp(const DraggableExampleApp());

class DraggableExampleApp extends StatelessWidget {
  const DraggableExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Draggable Sample')),
        body: const DraggableExample(),
      ),
    );
  }
}

class DraggableExample extends StatefulWidget {
  const DraggableExample({super.key});

  @override
  State<DraggableExample> createState() => _DraggableExampleState();
}

class _DraggableExampleState extends State<DraggableExample> {
  final acceptedDataTop = ValueNotifier(0);
  final acceptedDataBottom = ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    final targetTop = DragTarget<int>(
      builder: (
        BuildContext context,
        List<dynamic> accepted,
        List<dynamic> rejected,
      ) {
        return Container(
          height: 100.0,
          width: 100.0,
          color: Colors.orange.withAlpha(0xc0),
          child: Align(
            alignment: Alignment.topCenter,
            child: ListenableBuilder(
              listenable: acceptedDataTop,
              builder: (ctx, _) {
                return Text('top: ${acceptedDataTop.value}');
              },
            ),
          ),
        );
      },
      onWillAcceptWithDetails: (DragTargetDetails<int> details) {
        return false;
      },
      onAcceptWithDetails: (DragTargetDetails<int> details) {
        acceptedDataTop.value += details.data;
      },
    );

    final targetBottom = DragTarget<int>(
      builder: (
        BuildContext context,
        List<dynamic> accepted,
        List<dynamic> rejected,
      ) {
        return Container(
          height: 100.0,
          width: 100.0,
          color: Colors.cyan.withAlpha(0xc0),
          child: Align(
            alignment: Alignment.bottomCenter,
            child: ListenableBuilder(
              listenable: acceptedDataBottom,
              builder: (ctx, _) {
                return Text('bottom: ${acceptedDataBottom.value}');
              },
            ),
          ),
        );
      },
      onWillAcceptWithDetails: (DragTargetDetails<int> details) {
        return true;
      },
      onAcceptWithDetails: (DragTargetDetails<int> details) {
        acceptedDataBottom.value += details.data;
      },
    );

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Draggable<int>(
          // Data is the value this Draggable stores.
          data: 10,
          feedback: Container(
            color: const Color(0x7fff0000),
            height: 100,
            width: 100,
            child: const Icon(Icons.directions_run),
          ),
          childWhenDragging: Container(
            height: 100.0,
            width: 100.0,
            color: Colors.pinkAccent,
            child: const Center(child: Text('Child When Dragging')),
          ),
          child: Container(
            height: 100.0,
            width: 100.0,
            color: Colors.lightGreenAccent,
            child: const Center(child: Text('Draggable')),
          ),
        ),
        Container(
          height: 200.0,
          width: 200.0,
          color: const Color(0xff0f0f0f),
          child: Stack(
            children: [
              Positioned(
                left: 50,
                bottom: 50,
                child: targetBottom,
              ),
              Positioned(
                left: 0,
                top: 0,
                child: targetTop,
              ),
            ],
          ),
        ),
      ],
    );
  }
}