import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/pages/authentication/authentication_state.dart';
import 'package:didvan/pages/authentication/widgets/authentication_layout.dart';
import 'package:didvan/widgets/didvan/button.dart';
import 'package:didvan/widgets/didvan/text.dart';
import 'package:flutter/material.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:provider/provider.dart';

class Verification extends StatelessWidget {
  const Verification({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final AuthenticationState state = context.read<AuthenticationState>();
    return AuthenticationLayout(
      appBarTitle: 'تغییر رمز عبور',
      children: [
        DidvanText(
          'کد 6 رقمی ارسال شده به موبایل',
          style: Theme.of(context).textTheme.subtitle2,
          fontWeight: FontWeight.normal,
        ),
        const SizedBox(
          height: 8,
        ),
        DidvanText(
          state.username,
          style: Theme.of(context).textTheme.subtitle1,
        ),
        const SizedBox(
          height: 8,
        ),
        DidvanText(
          'را وارد کنید:',
          style: Theme.of(context).textTheme.subtitle2,
          fontWeight: FontWeight.normal,
        ),
        const SizedBox(
          height: 24,
        ),
        Directionality(
          textDirection: TextDirection.ltr,
          child: PinCodeTextField(
            keyboardType: TextInputType.number,
            animationType: AnimationType.scale,
            pinTheme: PinTheme(
              fieldHeight: 48,
              fieldWidth: 48,
              inactiveColor: Theme.of(context).colorScheme.border,
              activeFillColor: Theme.of(context).colorScheme.primary,
              activeColor: Theme.of(context).colorScheme.primary,
              borderRadius: DesignConfig.lowBorderRadius,
              borderWidth: 1,
              shape: PinCodeFieldShape.box,
            ),
            appContext: context,
            length: 6,
            onChanged: (value) => state.verificationCode = value,
          ),
        ),
        const Spacer(),
        DidvanButton(
          onPressed: () {
            state.currentPageIndex++;
          },
          title: 'ارسال مجدد کد',
        ),
        const SizedBox(
          height: 48,
        ),
      ],
    );
  }
}