import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:syncrow_app/features/app_layout/bloc/home_cubit.dart';
import 'package:syncrow_app/features/app_layout/model/space_model.dart';
import 'package:syncrow_app/features/menu/view/widgets/manage_home/room_screen.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/features/shared_widgets/text_widgets/body_small.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/helpers/custom_page_route.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class HomeSettingsView extends StatelessWidget {
  const HomeSettingsView({super.key, this.space});

  final SpaceModel? space;
  @override
  Widget build(BuildContext context) {
    return DefaultScaffold(
      title: 'Home Settings',
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //Home Info
          DefaultContainer(
            padding: const EdgeInsets.symmetric(
              horizontal: 25,
              vertical: 10,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const BodyMedium(text: 'Name '),
                    Flexible(
                      child: TextField(
                        textAlign: TextAlign.end,
                        decoration: InputDecoration(
                          hintText: 'Enter Name',
                          hintStyle: context.bodyMedium.copyWith(color: Colors.grey),
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                  ],
                ),
                //Divider
                Container(
                  margin: const EdgeInsets.only(bottom: 10),
                  height: 1,
                  color: ColorsManager.greyColor,
                ),
                Container(
                  width: MediaQuery.sizeOf(context).width,
                  child: GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(CustomPageRoute(
                          builder: (context) => RoomsView(
                                unitId: space?.id ?? '',
                              )));
                    },
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        BodyMedium(text: 'Rooms'),
                        Icon(
                          Icons.arrow_forward_ios,
                          color: ColorsManager.greyColor,
                          size: 15,
                        )
                      ],
                    ),
                  ),
                ),
                //Divider
                Container(
                  height: 1,
                  margin: const EdgeInsets.only(top: 10),
                  color: ColorsManager.greyColor,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const BodyMedium(text: 'Location'),
                    Flexible(
                      child: TextField(
                        textAlign: TextAlign.end,
                        decoration: InputDecoration(
                          hintText: 'Set',
                          hintStyle: context.bodyMedium.copyWith(color: Colors.grey),
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                  ],
                ),
                //Divider
                Container(
                  margin: const EdgeInsets.only(bottom: 10),
                  height: 1,
                  color: ColorsManager.greyColor,
                ),
                Container(
                  width: MediaQuery.sizeOf(context).width,
                  padding: const EdgeInsets.only(bottom: 10),
                  child: GestureDetector(
                    onTap: () async {
                      await HomeCubit.getInstance().generateInvitation(space?.id ?? '');
                    },
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        BodyMedium(text: 'Invite a member'),
                        Icon(
                          Icons.arrow_forward_ios,
                          color: ColorsManager.greyColor,
                          size: 15,
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          //Members Info
          const SizedBox(
            height: 10,
          ),
          //TODO connect the members to this GridView
          const BodySmall(
            text: "Members",
            fontWeight: FontWeight.bold,
          ),
          GridView.builder(
            shrinkWrap: true,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
            ),
            itemCount: 2,
            itemBuilder: (context, index) => Stack(
              alignment: Alignment.topCenter,
              children: [
                DefaultContainer(
                  margin: const EdgeInsets.only(top: 20),
                  padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 40),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const SizedBox(
                        height: 50,
                      ),
                      BodyMedium(
                        text: 'Member ${index + 1}',
                        fontWeight: FontWeight.bold,
                      ),
                      const SizedBox(height: 3),
                      const BodySmall(
                        text: 'Syncrow Account',
                        textAlign: TextAlign.center,
                      ),
                    ],
                  ),
                ),
                const SizedBox.square(
                  dimension: 80,
                  child: CircleAvatar(
                    backgroundColor: Colors.white,
                    child: SizedBox.square(
                      dimension: 77,
                      child: CircleAvatar(
                        backgroundColor: ColorsManager.greyColor,
                        child: Icon(Icons.person),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          const Spacer(),
          InkWell(
            onTap: () {},
            child: Row(
              children: [
                Expanded(
                  child: DefaultContainer(
                    child: Center(
                      child: BodyLarge(
                        text: 'Leave Home',
                        style: context.bodyLarge.copyWith(
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}