import 'package:didvan/config/design_config.dart';
import 'package:didvan/pages/authentication/authentication_state.dart';
import 'package:didvan/pages/authentication/widgets/authentication_app_bar.dart';
import 'package:didvan/widgets/didvan/button.dart';
import 'package:didvan/widgets/didvan/text.dart';
import 'package:didvan/widgets/didvan/text_field.dart';
import 'package:didvan/widgets/logos/didvan_horizontal_logo.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Authentication extends StatefulWidget {
  const Authentication({Key? key}) : super(key: key);

  @override
  State<Authentication> createState() => _AuthenticationState();
}

class _AuthenticationState extends State<Authentication> {
  final List<Widget> _pages = const [
    PhoneNumberInput(),
    PasswordInput(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Consumer<AuthenticationState>(
        builder: (context, state, child) => AnimatedSwitcher(
          duration: DesignConfig.defaultAppDuration,
          child: _pages[state.currentPageIndex],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final AuthenticationState state = context.read<AuthenticationState>();
    return SingleChildScrollView(
      physics: const NeverScrollableScrollPhysics(),
      padding: const EdgeInsets.all(20),
      child: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: [
            const Padding(
              padding: EdgeInsets.only(
                top: 80,
                left: 100,
                right: 100,
                bottom: 40,
              ),
              child: DidvanVerticalLogo(),
            ),
            DidvanTextField(
              title: 'شماره موبایل',
              textInputType: TextInputType.phone,
              hintText: 'شماره موبایل',
              onChanged: (value) {
                state.phoneNumber = value;
              },
            ),
            const SizedBox(
              height: 20,
            ),
            DidvanButton(
              title: 'ورود',
              onPressed: () {
                state.currentPageIndex = 1;
              },
            ),
            const Spacer(),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 60),
              child: RichText(
                textAlign: TextAlign.center,
                text: TextSpan(
                  style: Theme.of(context).textTheme.caption,
                  children: [
                    const TextSpan(text: 'با ثبت نام و ورود به دیدوان،'),
                    TextSpan(
                      text: ' شرایط ',
                      style: Theme.of(context)
                          .textTheme
                          .caption!
                          .copyWith(color: Theme.of(context).primaryColor),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          //TODO: Needs implementaion
                        },
                    ),
                    const TextSpan(text: 'و\n'),
                    TextSpan(
                      text: ' قوانین حریم خصوصی ',
                      style: Theme.of(context)
                          .textTheme
                          .caption!
                          .copyWith(color: Theme.of(context).primaryColor),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          //TODO: Needs implementaion
                        },
                    ),
                    const TextSpan(text: 'را می‌پذیرم'),
                  ],
                ),
              ),
            ),
            const SizedBox(
              height: 48,
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final AuthenticationState state = context.read<AuthenticationState>();
    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: [
            AuthenticationAppBar(
              title: 'ورود با شماره موبایل ' + state.phoneNumber,
            ),
            const Padding(
              padding: EdgeInsets.only(
                bottom: 44,
                top: 34,
                left: 100,
                right: 100,
              ),
              child: DidvanVerticalLogo(),
            ),
            DidvanTextField(
              onChanged: (value) => state.password = value,
              title: 'کلمه عبور',
              hintText: 'کلمه عبور',
              obsecureText: true,
            ),
            const SizedBox(
              height: 32,
            ),
            GestureDetector(
              onTap: () {
                //TODO: Needs implementaion
              },
              child: DidvanText(
                'فراموشی رمز عبور',
                style: Theme.of(context).textTheme.subtitle2,
                color: Theme.of(context).primaryColor,
              ),
            ),
            const Spacer(),
            DidvanButton(
              onPressed: () {},
              title: 'ورود ',
            ),
            const SizedBox(
              height: 48,
            ),
          ],
        ),
      ),
    );
  }
}