import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_progress_hud/flutter_progress_hud.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:unit2/bloc/profile/profile_bloc.dart';
import 'package:unit2/bloc/user/user_bloc.dart';
import 'package:unit2/model/profile/other_information/skills_and_hobbies.dart';
import 'package:unit2/theme-data.dart/colors.dart';
import 'package:unit2/utils/global.dart';
import 'package:unit2/utils/text_container.dart';
import 'package:unit2/widgets/Leadings/add_leading.dart';
import 'package:unit2/widgets/empty_data.dart';

import '../../../../bloc/profile/other_information/hobbies/hoobies_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(skillAndHobbiesTitle),
          backgroundColor: primary,
          centerTitle: true,
          actions: [AddLeading(onPressed: () {})],
        ),
        body: ProgressHUD(
          padding: const EdgeInsets.all(24),
          backgroundColor: Colors.black87,
          indicatorWidget: const SpinKitFadingCircle(color: Colors.white),
          child: BlocBuilder<UserBloc, UserState>(
            builder: (context, state) {
              if (state is UserLoggedIn) {
                return BlocBuilder<ProfileBloc, ProfileState>(
                  builder: (context, state) {
                    if (state is ProfileLoaded) {
                      return BlocConsumer<HoobiesBloc, HobbiesState>(
                        listener: (context, state) {
                          if (state is HobbiesLoadingState) {
                            final progress = ProgressHUD.of(context);
                            progress!.showWithText("Please wait...");
                          }if(state is HobbiesLoadedState || state is HobbiesErrorState){
                                      final progress = ProgressHUD.of(context);
                              progress!.dismiss();
                          }
                        },
                        builder: (context, state) {
                          if (state is HobbiesLoadedState) {
                            if (state.skillsAndHobbies.isNotEmpty) {
                              return Padding(
                                padding: const EdgeInsets.all(24),
                                child: Wrap(
                                    spacing: 8,
                                    runSpacing: 8,
                                    alignment: WrapAlignment.start,
                                    clipBehavior: Clip.none,
                                    verticalDirection: VerticalDirection.up,
                                    crossAxisAlignment:
                                        WrapCrossAlignment.start,
                                    direction: Axis.horizontal,
                                    children:
                                        state.skillsAndHobbies.map((SkillsHobbies sh) {
                                      return FittedBox(
                                        child: Row(
                                          children: [
                                            Text(sh.name!),
                                            IconButton(
                                                onPressed: () {},
                                                icon: const Icon(Icons.close)),
                                          ],
                                        ),
                                      );
                                    }).toList()),
                              );
                            } else {
                              const EmptyData(
                                  message:
                                      "You don't have any Skills and Hobbies added. Please click + to add");
                            }
                          }
                          return Container();
                        },
                      );
                    }
                    return Container();
                  },
                );
              }
              return Container();
            },
          ),
        ));
  }
}
