import 'dart:math';

import 'package:confetti/confetti.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import '../../../../shared/const/app_images.dart';
import '../../../../shared/widgets/universal/svg_asset_image.dart';

// Set the bool flag to true to show debug prints. Even if it is forgotten
// to set it to false, debug prints will not show in release builds.
// The handy part is that if it gets in the way in debugging, it is an easy
// toggle to turn it off here too. Often I just leave them true if it is one
// I want to see in dev mode, unless it is too chatty.
// ignore: no_literal_bool_comparisons, used for debug config.
const bool _debug = !kReleaseMode && false;

/// An example that show what an app using the theme might look like
class AppExampleLogin extends StatelessWidget {
  const AppExampleLogin({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: LoginColumn(),
    );
  }
}

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

  @override
  State<LoginColumn> createState() => _LoginColumnState();
}

class _LoginColumnState extends State<LoginColumn> {
  late ConfettiController _confettiController;

  @override
  void initState() {
    super.initState();
    _confettiController =
        ConfettiController(duration: const Duration(seconds: 3));
  }

  @override
  void dispose() {
    _confettiController.dispose();
    super.dispose();
  }

  /// A custom Path to paint stars.
  Path drawStar(Size size) {
    // Function to convert degree to radians
    double degToRad(double deg) => deg * (pi / 180.0);

    const int numberOfPoints = 5;
    final double halfWidth = size.width / 2;
    final double externalRadius = halfWidth;
    final double internalRadius = halfWidth / 2.5;
    final double degreesPerStep = degToRad(360 / numberOfPoints);
    final double halfDegreesPerStep = degreesPerStep / 2;
    final Path path = Path();
    final double fullAngle = degToRad(360);
    path.moveTo(size.width, halfWidth);

    for (double step = 0; step < fullAngle; step += degreesPerStep) {
      path.lineTo(halfWidth + externalRadius * cos(step),
          halfWidth + externalRadius * sin(step));
      path.lineTo(halfWidth + internalRadius * cos(step + halfDegreesPerStep),
          halfWidth + internalRadius * sin(step + halfDegreesPerStep));
    }
    path.close();
    return path;
  }

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final TextTheme textTheme = theme.textTheme;
    final Size mediaSize = MediaQuery.sizeOf(context);
    final bool useTwoColumns = mediaSize.height < 500;
    final double spaceFactor = useTwoColumns ? 0.5 : 1;

    if (_debug) debugPrint('Media size $mediaSize');

    return SafeArea(
      child: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints.tightFor(width: 600),
          child: Padding(
            padding: EdgeInsets.all(24.0 * spaceFactor),
            child: Row(
              children: <Widget>[
                if (useTwoColumns) ...<Widget>[
                  const SizedBox(height: 32),
                  ConstrainedBox(
                    constraints: const BoxConstraints.tightFor(width: 300),
                    child: SvgAssetImage(
                      assetName: AppImages.verified,
                      color: theme.colorScheme.primary,
                    ),
                  ),
                ] else
                  const SizedBox.shrink(),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Spacer(flex: useTwoColumns ? 1 : 2),
                      Text(
                        'Sign In',
                        style: textTheme.headlineLarge!
                            .copyWith(fontWeight: FontWeight.bold),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(
                            'No account?',
                            style: textTheme.bodyLarge,
                          ),
                          TextButton(
                            onPressed: () {},
                            child: const Text('Make account'),
                          ),
                        ],
                      ),
                      SizedBox(height: 8 * spaceFactor),
                      const TextField(
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.mail),
                          labelText: 'Email',
                          hintText: 'Enter your email address',
                        ),
                      ),
                      SizedBox(height: 16 * spaceFactor),
                      const TextField(
                        obscureText: true,
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.key),
                          labelText: 'Password',
                          hintText: 'Minimum 8 chars',
                        ),
                      ),
                      SizedBox(height: 8 * spaceFactor),
                      TextButton(
                        onPressed: () {},
                        child: const Text('Forgot Password?'),
                      ),
                      SizedBox(height: 16 * spaceFactor),
                      Center(
                        child: SizedBox(
                          width: 200,
                          child: FilledButton(
                            onPressed: () {
                              _confettiController.play();
                            },
                            child: ConfettiWidget(
                              confettiController: _confettiController,
                              numberOfParticles: 20,
                              blastDirectionality:
                                  BlastDirectionality.explosive,
                              shouldLoop: false,
                              colors: const <Color>[
                                Colors.green,
                                Colors.blue,
                                Colors.pink,
                                Colors.red,
                                Colors.indigo,
                                Colors.orange,
                                Colors.purple
                              ],
                              createParticlePath: drawStar,
                              canvas: Size.infinite,
                              child: Text(
                                'Sign In',
                                style: textTheme.titleMedium!.copyWith(
                                    color: theme.colorScheme.onPrimary),
                              ),
                            ),
                          ),
                        ),
                      ),
                      if (!useTwoColumns) ...<Widget>[
                        const Spacer(),
                        Expanded(
                          flex: 10,
                          child: SvgAssetImage(
                            assetName: AppImages.verified,
                            color: theme.colorScheme.primary,
                          ),
                        ),
                        const Spacer(),
                      ] else
                        const Spacer(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
