ModernMemoires/lib/views/settings_page/widgets/set_pin_popup_widget.dart

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../../../utils/logic/preferences_service.dart'; // For HapticFeedback

// ...Include PreferencesService and other necessary imports

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

  @override
  State<SetPinPopup> createState() => _SetPinPopup();
}

class _SetPinPopup extends State<SetPinPopup> {
  String _pin = '';
  String _confirmedPin = '';
  bool _isSettingPin = true; // True if setting the PIN, false if confirming the PIN

  static const int pinLength = 4;

  // Include the methods from PinInputScreen here
  List<Widget> _buildNumberPad() {
    List<int> numbers = List.generate(9, (index) => index + 1);
    List<Widget> rows = [];

    // First three rows (1-9)
    for (var i = 0; i < 3; i++) {
      rows.add(
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: numbers.skip(i * 3).take(3).map((number) {
            return _buildNumberButton(number);
          }).toList(),
        ),
      );
    }

    // Last row with 0
    rows.add(
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(width: 70), // Empty container to align 0 in center
          _buildNumberButton(0),
          Container(width: 70), // Empty container to align 0 in center
        ],
      ),
    );

    return rows;
  }

  Widget _buildNumberButton(int number) {
    return GestureDetector(
      onTap: () => _onNumberTap(number),
      onTapDown: (_) => HapticFeedback.lightImpact(), // Cool haptic feedback on tap
      child: Container(
        width: 70,
        height: 70,
        margin: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: Colors.black),
          borderRadius: BorderRadius.circular(35),
        ),
        child: Center(
          child: Text(
            number.toString(),
            style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }

  void _onNumberTap(int number) {
    setState(() {
      if (_isSettingPin) {
        _pin += number.toString();
      } else {
        _confirmedPin += number.toString();
      }
    });

    if ((_isSettingPin && _pin.length == pinLength) || (!_isSettingPin && _confirmedPin.length == pinLength)) {
      if (!_isSettingPin && _pin == _confirmedPin) {
        // Call setPin and enablePin methods, assuming they are async
        PreferencesService().setPin(int.parse(_pin));
        PreferencesService().enablePin();
        Navigator.of(context).pop(); // Close the dialog
      } else if (!_isSettingPin && _pin != _confirmedPin) {
        // PINs don't match, reset and let the user set the PIN again
        setState(() {
          _pin = '';
          _confirmedPin = '';
          _isSettingPin = true; // Reset back to setting PIN
        });
      } else {
        // Move to confirming the PIN
        setState(() {
          _isSettingPin = false;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shadowColor: Colors.white,
      backgroundColor: Colors.transparent,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 15, tileMode: TileMode.repeated),
        child: Container(
          height: 600,
          width: 400,
          decoration: const BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(50))),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(_isSettingPin ? 'Set a PIN' : 'Repeat PIN', style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
              const SizedBox(height: 20),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: List.generate(pinLength, (index) {
                  return Container(
                    margin: const EdgeInsets.all(4),
                    width: 15,
                    height: 15,
                    decoration: BoxDecoration(
                      color: (_isSettingPin ? _pin.length : _confirmedPin.length) > index ? const Color(0xffD9D9D9) : Colors.transparent,
                      border: Border.all(color: const Color(0xffD9D9D9)),
                      borderRadius: BorderRadius.circular(15),
                    ),
                  );
                }),
              ),
              const SizedBox(height: 20),
              ..._buildNumberPad(),
            ],
          ),
        ),
      ),
    );
  }
}