import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:proxibuy/core/gen/assets.gen.dart';
import 'package:proxibuy/core/routes/app_router.dart';
import 'package:proxibuy/core/utils/empty_space.dart';
import 'package:proxibuy/data/models/onboarding_banner_model.dart';
import 'package:proxibuy/presentation/providers/them_mode_cubit.dart';
import 'package:proxibuy/presentation/ui/theme/responsive.dart';
import 'package:proxibuy/presentation/ui/widgets/carousel/carousel_slider_widget.dart';
import 'package:proxibuy/presentation/ui/widgets/edit_text/phone_number_input.dart';

class AuthPage extends StatefulWidget {
  const AuthPage({super.key});

  @override
  State<AuthPage> createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  bool onBoarding = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Auth',
          style: Theme.of(context).textTheme.titleLarge,
        ),
        backgroundColor: Colors.transparent,
        surfaceTintColor: Colors.transparent,
        actions: [
          IconButton(
            icon: Icon(Icons.brightness_6),
            onPressed: () {
              context.read<ThemModeCubit>().changeTheme();
            },
          ),
        ],
      ),
      body: Responsive(context).builder(
          mobile: onBoarding
              ? carousle(
                  withNavs: true,
                  autoPlay: false,
                  enableInfiniteScroll: false,
                )
              : auth(context),
          tablet: Row(
            children: [
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(50.0),
                  child: carousle(
                    withNavs: false,
                    autoPlay: true,
                    enableInfiniteScroll: true,
                  ),
                ),
              ),
              Expanded(
                  child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 50),
                      child: auth(context)))
            ],
          ),
          desktop: Row(
            children: [
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(80.0),
                  child: carousle(
                    withNavs: false,
                    autoPlay: true,
                    enableInfiniteScroll: true,
                  ),
                ),
              ),
              Expanded(
                  child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 160),
                      child: auth(context)))
            ],
          )),
    );
  }

  Padding auth(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(
            child: FlutterLogo(
              size: 120,
            ),
          ),
          Text('Proxibuy Geofencing marketing'),
          36.h,
          Row(
            children: [
              Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text('Login'),
                  Text('Please enter your phone number')
                ],
              ),
            ],
          ),
          36.h,
          PhoneNumberInput(),
          36.h,
          SizedBox(
            width: double.infinity,
            height: 46,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(64),
                ),
              ),
              onPressed: () async {
                context.go(AppRouter.initial);
              },
              child: Text('Get OTP'),
            ),
          ),
          24.h,
          Row(
            children: [
              Expanded(
                  child: Divider(
                color: Theme.of(context).colorScheme.onSurface,
              )),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Text('Or continue with'),
              ),
              Expanded(child: Builder(builder: (context) {
                return Divider(
                  color: Theme.of(context).colorScheme.onSurface,
                );
              }))
            ],
          ),
          24.h,
          SizedBox(
            width: double.infinity,
            height: 46,
            child: OutlinedButton(
                style: OutlinedButton.styleFrom(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(64),
                    ),
                    side: BorderSide(
                        width: 2,
                        color: Theme.of(context).colorScheme.onSurface)),
                onPressed: () async {},
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Image.network(
                        'https://img.icons8.com/?size=100&id=110560&format=png&color=000000',
                        width: 32, // Adjust width
                        height: 32, // Adjust height
                      ),
                    ),
                    Text(
                      'Login with google',
                      style: Theme.of(context).textTheme.labelLarge,
                    ),
                  ],
                )),
          ),
        ],
      ),
    );
  }

  CarouselSliderWidget<OnboardingBannerModel> carousle({
    required final bool withNavs,
    required final bool autoPlay,
    required final bool enableInfiniteScroll,
  }) {
    return CarouselSliderWidget<OnboardingBannerModel>(
      height: MediaQuery.sizeOf(context).height * 0.8,
      items: [
        OnboardingBannerModel(
            image: Assets.image.onboarding.banner1,
            desc:
                'Proxibuy Geofencing marketing\n"Join the app to discover exclusive discounts and special offers in specific areas around you for a smarter shopping experience!"'),
        OnboardingBannerModel(
            image: Assets.image.onboarding.banner2,
            desc:
                'Proxibuy Geofencing marketing\n"Join the app to discover exclusive discounts and special offers in specific areas around you for a smarter shopping experience!"'),
        OnboardingBannerModel(
            image: Assets.image.onboarding.banner3,
            desc:
                'Proxibuy Geofencing marketing\n"Join the app to discover exclusive discounts and special offers in specific areas around you for a smarter shopping experience!"'),
      ],
      withNavs: withNavs,
      autoPlay: autoPlay,
      enableInfiniteScroll: enableInfiniteScroll,
      onLastClick: () {
        setState(() {
          onBoarding = false;
        });
      },
      onPageBuilder: (context, item, _) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(child: item.image.image()),
            if (Responsive(context).isDesktop()) 64.h,
            Text(item.desc)
          ],
        );
      },
    );
  }
}