import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:flutter/material.dart';

class NumericPad extends StatelessWidget {
  final Function(String) onNumberSelected;
  final bool isPin;
  const NumericPad({super.key, required this.onNumberSelected, this.isPin = false});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            numberWidget('1'),
            dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
            numberWidget('2'),
            dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
            numberWidget('3')
          ],
        ),
        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            numberWidget('4'),
            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
            numberWidget('5'),
            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
            numberWidget('6')
          ],
        ),
        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            numberWidget('7'),
            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
            numberWidget('8'),
            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
            numberWidget('9')
          ],
        ),
        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            isPin ? spaceWidget() : numberWidget('0'),
            dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
            numberWidget(isPin ? '0' : '000'),
            dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
            removeWidget()
          ],
        ),
      ],
    );
  }

  Widget dividerGradient(bool isHorizontal, AlignmentGeometry gradientFrom, AlignmentGeometry gradientTo, {bool fullColor = false}) {
    return Container(
      width: isHorizontal ? SizeConfig.width : 1,
      height: isHorizontal ? 1 : SizeConfig.height * 0.097,
      decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [
                if(isHorizontal) ...[
                  ColorPalette.slate200.withOpacity(0)
                ],
                ColorPalette.slate200,
                fullColor ? ColorPalette.slate200 : ColorPalette.slate200.withOpacity(0)
              ],
              begin: gradientFrom,
              end: gradientTo
          )
      ),
    );
  }

  Widget spaceWidget() {
    return const Expanded(
        child: SizedBox()
    );
  }

  Widget numberWidget(String number) {
    return Expanded(
        child: GestureDetector(
          onTap: () {
            onNumberSelected(number);
          },
          child: Container(
            color: Colors.transparent,
            padding: EdgeInsets.symmetric(vertical: SizeConfig.height * .028),
            child: Text(
              number,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.bold,
                color: ColorPalette.slate800
              ),
            ),
          ),
        )
    );
  }

  Widget removeWidget() {
    return Expanded(
        child: GestureDetector(
          onTap: () {
            onNumberSelected('');
          },
          child: Container(
            color: Colors.transparent,
            padding: EdgeInsets.symmetric(vertical: SizeConfig.height * .028),
            child: const Icon(
              Icons.backspace_outlined,
              size: 28,
              color: ColorPalette.slate800,
            ),
          ),
        )
    );
  }
}