import 'package:flutter/cupertino.dart';
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_large.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/constants.dart';

class AddMemberInterface extends StatelessWidget {
  const AddMemberInterface({super.key, required this.memberRole});
  final MemberRole memberRole;
  @override
  Widget build(BuildContext context) {
    return DefaultScaffold(
      title: 'Add Member',
      actions: [
        Padding(
          padding: const EdgeInsets.only(right: 10),
          child: TextButton(
            onPressed: () {},
            child: const BodyMedium(
              text: 'SAVE',
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
      child: Column(
        children: [
          SizedBox.square(
            dimension: 120,
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: SizedBox.square(
                dimension: 117,
                child: CircleAvatar(
                  backgroundColor: Colors.grey,
                  child: Icon(
                    memberRole == MemberRole.FamilyMember
                        ? Icons.family_restroom
                        : Icons.person,
                    size: 25,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 20),
            child: Row(
              children: [
                const Expanded(
                  child: SizedBox.shrink(),
                ),
                BodyLarge(
                  text: memberRole == MemberRole.FamilyMember
                      ? 'Family Member'
                      : 'Guest',
                  fontWeight: FontWeight.bold,
                ),
                Expanded(
                  child: Row(
                    children: [
                      IconButton(
                        onPressed: () {},
                        icon: const Icon(
                          Icons.edit_outlined,
                          size: 20,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          memberRole == MemberRole.FamilyMember
              ? 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: '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: 'Account '),
                          Flexible(
                            child: TextField(
                              textAlign: TextAlign.end,
                              decoration: InputDecoration(
                                hintText: 'Account Name',
                                hintStyle: context.bodyMedium
                                    .copyWith(color: Colors.grey),
                                border: InputBorder.none,
                              ),
                            ),
                          ),
                        ],
                      ),
                      Container(
                        height: 1,
                        color: ColorsManager.greyColor,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const BodyMedium(text: 'Family Role'),
                          Flexible(
                            child: TextField(
                              textAlign: TextAlign.end,
                              decoration: InputDecoration(
                                hintText: 'Common Member',
                                hintStyle: context.bodyMedium
                                    .copyWith(color: Colors.grey),
                                border: InputBorder.none,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                )
              : 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: 'Unlock with Mobile phone '),
                          Expanded(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                Transform.scale(
                                  scale: .8,
                                  child: CupertinoSwitch(
                                    value: false,
                                    onChanged: (value) {},
                                    applyTheme: true,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                      Container(
                        height: 1,
                        color: ColorsManager.greyColor,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const BodyMedium(text: 'Set Validity Period '),
                          Flexible(
                            child: TextField(
                              textAlign: TextAlign.end,
                              decoration: InputDecoration(
                                hintText: 'Start and End Date',
                                hintStyle: context.bodyMedium
                                    .copyWith(color: Colors.grey),
                                border: InputBorder.none,
                              ),
                            ),
                          ),
                        ],
                      ),
                      Container(
                        height: 1,
                        color: ColorsManager.greyColor,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const BodyMedium(text: 'Effictive Period '),
                          Flexible(
                            child: TextField(
                              textAlign: TextAlign.end,
                              decoration: InputDecoration(
                                hintText: 'Start and End Time',
                                hintStyle: context.bodyMedium
                                    .copyWith(color: Colors.grey),
                                border: InputBorder.none,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
        ],
      ),
    );
  }
}
