import 'package:flutter/material.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/title_medium.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

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

  @override
  Widget build(BuildContext context) {
    return DefaultScaffold(
      title: 'Profile Page',
      child: Column(
        children: [
          //profile pic
          const SizedBox.square(
            dimension: 120,
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: SizedBox.square(
                dimension: 115,
                child: CircleAvatar(
                  backgroundColor: Colors.grey,
                  child: FlutterLogo(),
                ),
              ),
            ),
          ),
          const SizedBox(height: 20),
          //name
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const TitleMedium(text: 'Karim'),
              const SizedBox(
                width: 5,
              ),
              InkWell(
                onTap: () {
                  //TODO: Implement edit name
                },
                child: const Icon(
                  Icons.edit_outlined,
                  size: 20,
                  color: ColorsManager.textPrimaryColor,
                ),
              ),
            ],
          ),
          const SizedBox(height: 10),
          //Info
          DefaultContainer(
              padding: const EdgeInsets.symmetric(
                horizontal: 25,
                vertical: 5,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const BodyMedium(text: 'Email '),
                      Flexible(
                        child: TextField(
                          textAlign: TextAlign.end,
                          decoration: InputDecoration(
                            hintText: ' Test@test.com',
                            hintStyle:
                                context.bodyMedium.copyWith(color: Colors.grey),
                            border: InputBorder.none,
                          ),
                        ),
                      ),
                    ],
                  ),
                  Container(
                    height: 1,
                    color: ColorsManager.greyColor,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const BodyMedium(text: 'Region '),
                      Flexible(
                        child: TextField(
                          textAlign: TextAlign.end,
                          decoration: InputDecoration(
                            hintText: 'United Arab Emirates',
                            hintStyle:
                                context.bodyMedium.copyWith(color: Colors.grey),
                            border: InputBorder.none,
                          ),
                        ),
                      ),
                    ],
                  ),
                  Container(
                    height: 1,
                    color: ColorsManager.greyColor,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const BodyMedium(text: 'Time Zone '),
                      Flexible(
                        child: TextField(
                          textAlign: TextAlign.end,
                          decoration: InputDecoration(
                            hintText: 'GMT +4',
                            hintStyle:
                                context.bodyMedium.copyWith(color: Colors.grey),
                            border: InputBorder.none,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              )),
        ],
      ),
    );
  }
}