habib_kids/lib/screens/photo/photo_screen_large.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:image_picker/image_picker.dart';
import 'package:my_flutter_puzzle/application/states/image_splitter_state.dart';
import 'package:my_flutter_puzzle/application/states/puzzle_state.dart';
import 'package:my_flutter_puzzle/models/puzzle_data.dart';
import 'package:my_flutter_puzzle/providers.dart';
import 'package:my_flutter_puzzle/res/puzzle_constants.dart';
import 'package:my_flutter_puzzle/utils/puzzle_solver.dart';
import 'package:my_flutter_puzzle/widgets/photo_screen/image_viewer.dart';
import 'package:my_flutter_puzzle/widgets/photo_screen/pick_image_button.dart';
import 'package:my_flutter_puzzle/widgets/solo_screen/solo_screen_export.dart';
import 'package:palette_generator/palette_generator.dart';
import 'package:rive/rive.dart';

class PhotoScreenLarge extends ConsumerStatefulWidget {
  const PhotoScreenLarge({
    required this.solverClient,
    required this.initialPuzzleData,
    required this.puzzleSize,
    required this.riveController,
    Key? key,
  }) : super(key: key);

  final PuzzleSolverClient solverClient;
  final PuzzleData initialPuzzleData;
  final int puzzleSize;
  final RiveAnimationController riveController;

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _SoloScreenLargeState();
}

class _SoloScreenLargeState extends ConsumerState<PhotoScreenLarge> {
  late final PuzzleSolverClient _solverClient;
  late final int _puzzleSize;
  late final PuzzleData _initialPuzzleData;
  late final RiveAnimationController _riveController;

  bool _isStartPressed = false;
  final _imagePicker = ImagePicker();

  List<Image>? _previousImages;
  Image? _previousImage;
  PaletteGenerator? _previousPalette;

  @override
  void initState() {
    _solverClient = widget.solverClient;
    _puzzleSize = widget.puzzleSize;
    _initialPuzzleData = widget.initialPuzzleData;
    _riveController = widget.riveController;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    ref.listen(puzzleNotifierProvider(_solverClient), (previous, PuzzleState next) {
      if (next is PuzzleInitializing) {
        setState(() {
          _isStartPressed = true;
        });
      }
    });

    ref.listen(imageSplitterNotifierProvider, (previous, next) {
      if (next is ImageSplitterComplete) {
        setState(() {
          _previousImages = next.images;
          _previousImage = next.image;
          _previousPalette = next.palette;
        });
      }
    });

    var fontSize = 70.0;
    var boardSize = 280.0;

    var spacing = 4;
    var eachBoxSize = (boardSize / _puzzleSize) - (spacing * (_puzzleSize - 1));

    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.background,
      body: SafeArea(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsetsDirectional.symmetric(horizontal: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(height: 32),
                  MovesTilesWidget(solverClient: _solverClient, fontSize: 16),
                  const SizedBox(height: 32),
                  GameButtonWidget(
                    solverClient: _solverClient,
                    initialPuzzleData: _initialPuzzleData,
                  ),
                ],
              ),
            ),
            SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  const TimerWidget(fontSize: 30),
                  const SizedBox(height: 12),
                  Consumer(
                    builder: (context, ref, child) {
                      final state = ref.watch(imageSplitterNotifierProvider);

                      return state.maybeWhen(
                        () => PuzzleWidget(
                          solverClient: _solverClient,
                          boardSize: boardSize,
                          eachBoxSize: eachBoxSize,
                          initialPuzzleData: _initialPuzzleData,
                          fontSize: fontSize,
                          images: _previousImages,
                          kInitialSpeed: kInitialSpeed,
                        ),
                        complete: (image, images, palette) {
                          _previousImages = images;
                          _previousImage = image;
                          _previousPalette = palette;

                          return PuzzleWidget(
                            solverClient: _solverClient,
                            boardSize: boardSize,
                            eachBoxSize: eachBoxSize,
                            initialPuzzleData: _initialPuzzleData,
                            fontSize: fontSize,
                            images: images,
                            kInitialSpeed: kInitialSpeed,
                          );
                        },
                        orElse: () => PuzzleWidget(
                          solverClient: _solverClient,
                          boardSize: boardSize,
                          eachBoxSize: eachBoxSize,
                          initialPuzzleData: _initialPuzzleData,
                          fontSize: fontSize,
                          images: _previousImages,
                          kInitialSpeed: kInitialSpeed,
                        ),
                      );
                    },
                  ),
                  const SizedBox(height: 30),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsetsDirectional.symmetric(horizontal: 10),
              child: Stack(
                children: [
                  AnimatedDash(
                    boardSize: boardSize * 0.8,
                    riveController: _riveController,
                    onInit: (_) => setState(() {}),
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      CountdownWidget(
                        isStartPressed: _isStartPressed,
                        onFinish: () {
                          ref.read(timerNotifierProvider.notifier).startTimer();
                          setState(() {
                            _isStartPressed = false;
                          });
                        },
                        initialSpeed: kInitialSpeed,
                      ),
                      Visibility(
                        visible: !_isStartPressed,
                        child: Column(
                          children: [
                            ImageViewer(
                              imagePicker: _imagePicker,
                              puzzleSize: _puzzleSize,
                              previousImage: _previousImage,
                              previousPalette: _previousPalette,
                              imageSize: 200,
                            ),
                            PickImageButton(
                              text: 'Pick Image',
                              onTap: ref.read(imageSplitterNotifierProvider) is ImageSplitterComplete
                                  ? () => ref.read(imageSplitterNotifierProvider.notifier).generateImages(
                                        picker: _imagePicker,
                                        puzzleSize: _puzzleSize,
                                      )
                                  : null,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            // SizedBox(),
          ],
        ),
      ),
    );
  }
}