import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:gascom/constants/app_theme.dart';
import 'package:gascom/widgets/bottom_nav.dart';
import 'package:pinput/pinput.dart';

class OtpScreen extends StatelessWidget {
  const OtpScreen({
    super.key,
    required this.isSms,
  });

  final bool isSms;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 25),
        children: [
          const SizedBox(height: 150),
          Center(
            child: SizedBox(
              width: MediaQuery.sizeOf(context).width * 0.6,
              child: SvgPicture.asset(
                "assets/svgs/logo.svg",
                semanticsLabel: 'Home',
              ),
            ),
          ),
          const SizedBox(height: 80),
          Center(
            child: AutoSizeText(
              "يرجى ادخال رمز OTP",
              style: Theme.of(context).textTheme.bodyLarge,
              textAlign: TextAlign.center,
              minFontSize: 8,
            ),
          ),
          const SizedBox(height: 35),
          Container(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 6),
            decoration: BoxDecoration(
              // add a rounded border radius to the container
              borderRadius: BorderRadius.circular(40),
              border: Border.all(
                color: AppTheme.textColor,
                width: 2,
              ),
            ),
            child: Directionality(
              textDirection: TextDirection.ltr,
              child: Pinput(
                length: 6,
                defaultPinTheme: PinTheme(
                  width: 30,
                  height: 35,
                  textStyle: Theme.of(context).textTheme.bodyLarge,
                  margin: const EdgeInsets.symmetric(horizontal: 5),
                  decoration: BoxDecoration(
                    border: Border.all(width: 0, color: Colors.transparent),
                  ),
                ),
                onCompleted: (value) {
                  Navigator.pushAndRemoveUntil(context,
                      MaterialPageRoute(builder: (context) => const BottomNav()), (_) => false);
                },
              ),
            ),
          ),
        ],
      ),
    ));
  }
}