import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';


class Numpad extends StatelessWidget {
  final void Function(int)? onNumberPressed;
  final void Function() onDeletePressed;
  const Numpad({
    Key? key,
     this.onNumberPressed,
     required this.onDeletePressed, required void Function(String number) onNumberSelected, required void Function() onBackspacePressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,

          children: [
            NumpadButton(text: '1', onPressed: () => onNumberPressed!(1)),
            NumpadButton(text: '2', onPressed: () => onNumberPressed!(2)),
            NumpadButton(text: '3', onPressed: () => onNumberPressed!(3)),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            NumpadButton(text: '4', onPressed: () => onNumberPressed!(4)),
            NumpadButton(text: '5', onPressed: () => onNumberPressed!(5)),
            NumpadButton(text: '6', onPressed: () => onNumberPressed!(6)),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            NumpadButton(text: '7', onPressed: () => onNumberPressed!(7)),
            NumpadButton(text: '8', onPressed: () => onNumberPressed!(8)),
            NumpadButton(text: '9', onPressed: () => onNumberPressed!(9)),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            NumpadButton(
              icon: Icons.backspace_outlined,
              onPressed: onDeletePressed,
            ),
            NumpadButton(text: '0', onPressed: () => onNumberPressed!(0)),
            NumpadButton(icon: Icons.check, onPressed: () {}),
          ],
        ),
      ],
    );
  }
}


class NumpadButton extends StatelessWidget {
  final String? text;
  final IconData? icon;
  final bool haveBorder;
  final void Function() onPressed;
  const NumpadButton(
      {Key? key, this.text, this.icon, this.haveBorder = true,  required this.onPressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    TextStyle buttonStyle = GoogleFonts.kanit(
      color: Color(0xff65676b),
      fontSize: 30,
      fontWeight: FontWeight.w500,
    );
    Widget label = icon != null
        ? Icon(
      icon,
      color: Color(0xff65676b),
      size: 35.0,
    )
        : Text(this.text ?? '', style: buttonStyle);

    return Container(
      width: 90,
      height: 90,
      padding: EdgeInsets.symmetric(vertical: 10.0),
      child: OutlinedButton(
        style: haveBorder ? OutlinedButton.styleFrom(
          side: BorderSide.none,
        ) : OutlinedButton.styleFrom(
          side: BorderSide.none,
          backgroundColor: Colors.transparent,
        ),
        onPressed: onPressed,
        child: label
      ),
    );
  }
}

class NumpadButtonSmall extends StatelessWidget {
  final String? text;
  final IconData? icon;
  final bool haveBorder;
  final void Function() onPressed;
  const NumpadButtonSmall(
      {Key? key, this.text, this.icon, this.haveBorder = true,  required this.onPressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    TextStyle buttonStyle = GoogleFonts.kanit(
      color: Color(0xff65676b),
      fontSize: 26,
      fontWeight: FontWeight.w500,
    );
    Widget label = icon != null
        ? Icon(
      icon,
      color: Color(0xff65676b),
      size: 30.0,
    )
        : Text(this.text ?? '', style: buttonStyle);

    return Container(
      width: 70,
      height: 70,
      padding: EdgeInsets.symmetric(vertical: 10.0),
      child: OutlinedButton(
        style: haveBorder ? OutlinedButton.styleFrom(
          side: BorderSide.none,
        ) : OutlinedButton.styleFrom(
          side: BorderSide.none,
          backgroundColor: Colors.transparent,
        ),
        onPressed: onPressed,
        child: Padding(
          padding: EdgeInsets.all(5.0),
          child: label,
        ),
      ),
    );
  }
}


class Preview extends StatelessWidget {
  final int length;
  final String text;
  const Preview({Key? key, required this.length, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Widget> previewLength = [];
    for (var i = 0; i < length; i++) {
      previewLength.add(Dot(isActive: text.length >= i+1));
    }
    return Container(
        padding: EdgeInsets.symmetric(vertical: 10.0),
        child: Wrap(
            children: previewLength
        )
    );
  }
}

class Dot extends StatelessWidget {
  final bool isActive;
  const Dot({Key? key, this.isActive = false}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: Container(
        width: 15.0,
        height: 15.0,
        decoration: BoxDecoration(
          color: isActive ? Theme.of(context).primaryColor : Colors.transparent,
          border: Border.all(
              width: 1.0,
              color: Theme.of(context).primaryColor
          ),
          borderRadius: BorderRadius.circular(15.0),
        ),
      ),
    );
  }
}