// ignore_for_file: avoid_unnecessary_containers, sized_box_for_whitespace

import 'package:flutter/material.dart';
import 'package:tour_travel_agr/helper/widget_responsive.dart';
import 'package:tour_travel_agr/resource/assets.dart';
import 'package:tour_travel_agr/resource/colors.dart';
import 'package:tour_travel_agr/resource/font.dart';
import 'package:tour_travel_agr/resource/routes.dart';
import 'package:tour_travel_agr/resource/size.dart';
import 'package:tour_travel_agr/resource/style.dart';

class ProfileView extends StatelessWidget {
  const ProfileView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorManager.backgroundColor,
      body: ScreenResponsive(
        widget: const BodyWidget(),
        widthScreen: MediaQuery.of(context).size.width,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          left: 0,
          top: 0,
          child: Container(
            child: Image(
              image: AssetImage(
                Assets.elipse,
              ),
            ),
          ),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: double.infinity,
              height: 330 + AppPadding.safeAreaTop(context),
              margin: EdgeInsets.all(
                AppPadding.p8,
              ),
              decoration: BoxDecoration(
                color: ColorManager.primary,
                borderRadius: BorderRadius.circular(
                  20,
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    margin: EdgeInsets.symmetric(
                      vertical: AppMargin.m25,
                    ),
                    child: Row(
                      children: [
                        const SizedBox(
                          width: 12,
                        ),
                        GestureDetector(
                          onTap: () {
                            Navigator.pop(context);
                          },
                          child: const Icon(
                            Icons.arrow_back,
                            color: Colors.white,
                            size: 24,
                          ),
                        ),
                        const Spacer(),
                        Text(
                          "Profil",
                          style: getBoldStyle(
                            color: Colors.white,
                            fontFamily: FontConstants.mulish,
                            fontSize: 17,
                          ),
                        ),
                        const Spacer(),
                        GestureDetector(
                          onTap: () {
                            Navigator.pushNamed(
                              context,
                              Routes.editProfileRoute,
                            );
                          },
                          child: Container(
                            width: 24,
                            height: 24,
                            child: Image(
                              fit: BoxFit.fill,
                              image: AssetImage(
                                Assets.editIcon,
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(
                          width: 12,
                        )
                      ],
                    ),
                  ),
                  Container(
                    width: 120,
                    height: 120,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(
                        100,
                      ),
                      image: DecorationImage(
                        fit: BoxFit.fill,
                        image: AssetImage(
                          Assets.profileSample,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: AppMargin.m16,
                  ),
                  Text(
                    "Dio Maulana",
                    style: getSemiBoldStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                  SizedBox(
                    height: AppMargin.m8,
                  ),
                  Text(
                    "ID 33040000000000000083",
                    style: getRegularStyle(
                      color: Colors.white,
                      fontSize: 12,
                    ),
                  ),
                  const SizedBox(
                    height: 40,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image(
                        width: 20,
                        height: 20,
                        image: AssetImage(
                          Assets.phoneIcon,
                        ),
                      ),
                      Text(
                        "+62-8127-535-1256",
                        style: getRegularStyle(
                          color: Colors.white,
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
            GestureDetector(
              onTap: () {
                Navigator.pushNamed(
                  context,
                  Routes.changePasswordRoute,
                );
              },
              child: ProfileButton(
                marginTop: 32,
                icon: Assets.passwordIcon,
                text: "Ganti Password",
              ),
            ),
            GestureDetector(
              onTap: () {
                Navigator.pushNamedAndRemoveUntil(
                  context,
                  Routes.loginRoute,
                  (route) => false,
                );
              },
              child: ProfileButton(
                marginTop: 16,
                icon: Assets.logoutGreyIcon,
                text: "Log Out",
              ),
            ),
          ],
        ),
      ],
    );
  }
}

class ProfileButton extends StatelessWidget {
  const ProfileButton({
    Key? key,
    required this.marginTop,
    required this.text,
    required this.icon,
  }) : super(key: key);

  final double marginTop;
  final String text;
  final String icon;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(
        horizontal: AppPadding.p20,
      ),
      margin: EdgeInsets.only(
        top: marginTop,
      ),
      child: Container(
        width: double.infinity,
        height: 50,
        padding: EdgeInsets.symmetric(
          horizontal: AppPadding.p20,
          vertical: AppPadding.p15,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: const Color.fromARGB(255, 228, 225, 225),
        ),
        child: Row(
          children: [
            Container(
              width: 16,
              height: 20,
              child: Image(
                fit: BoxFit.fill,
                image: AssetImage(
                  icon,
                ),
              ),
            ),
            SizedBox(
              width: AppMargin.m18,
            ),
            Text(
              text,
              style: getRegularStyle(
                color: Colors.black,
              ),
            )
          ],
        ),
      ),
    );
  }
}
