import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_event.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/question_model.dart';
import 'package:syncrow_app/features/devices/view/device_settings/question_page.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/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class FaqSettingPage extends StatelessWidget {
  final DeviceModel? device;

  const FaqSettingPage({super.key, this.device});

  @override
  Widget build(BuildContext context) {
    TextEditingController _searchController = TextEditingController();
    return DefaultScaffold(
      title: 'FAQ',
      child: BlocProvider(
        create: (context) => DeviceSettingBloc(deviceId: device?.uuid ?? '')
          ..add(const DeviceSettingInitialQuestion()),
        child: BlocBuilder<DeviceSettingBloc, DeviceSettingState>(
          builder: (context, state) {
            final sensor = BlocProvider.of<DeviceSettingBloc>(context);
            List<QuestionModel> displayedQuestions = [];
            if (state is FaqSearchState) {
              displayedQuestions = state.filteredFaqQuestions;
            } else if (state is FaqLoadedState) {
              displayedQuestions = state.filteredFaqQuestions;
            }
            return state is DeviceSettingLoadingState
                ? const Center(
                    child: DefaultContainer(
                        width: 50,
                        height: 50,
                        child: CircularProgressIndicator()),
                  )
                : Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      DefaultContainer(
                        padding: const EdgeInsets.all(5),
                        child: TextFormField(
                          controller: _searchController,
                          onChanged: (value) {
                            sensor.add(SearchFaqEvent(value));
                          },
                          decoration: InputDecoration(
                            hintText: 'Enter your questions',
                            hintStyle: const TextStyle(
                                color: ColorsManager.textGray,
                                fontSize: 16,
                                fontWeight: FontWeight.w400),
                            suffixIcon: Container(
                              padding: const EdgeInsets.all(5.0),
                              margin: const EdgeInsets.all(10.0),
                              child: SvgPicture.asset(
                                Assets.searchIcon,
                                fit: BoxFit.contain,
                              ),
                            ),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(
                        height: MediaQuery.of(context).size.height * 0.04,
                      ),
                      BodyMedium(
                        text: _searchController.text.isEmpty
                            ? 'Device Related FAQs'
                            : '${displayedQuestions.length} Help Topics',
                        fontWeight: FontWeight.w700,
                        fontSize: 12,
                        fontColor: ColorsManager.grayColor,
                      ),
                      const SizedBox(
                        height: 8,
                      ),
                      displayedQuestions.isEmpty
                          ? const SizedBox()
                          : DefaultContainer(
                              child: ListView.builder(
                              shrinkWrap: true,
                              itemCount: displayedQuestions.length,
                              itemBuilder: (context, index) {
                                final faq = displayedQuestions[index];
                                return InkWell(
                                  onTap: () {
                                    Navigator.of(context).push(
                                      MaterialPageRoute(
                                          builder: (context) =>
                                              QuestionPageSetting(
                                                deviceId: device!.uuid,
                                                questionModel: faq,
                                              )),
                                    );
                                  },
                                  child: SizedBox(
                                    child: Column(
                                      mainAxisSize: MainAxisSize.min,
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Row(
                                            children: [
                                              Expanded(
                                                child: BodyMedium(
                                                  fontSize: 14,
                                                  fontWeight: FontWeight.w400,
                                                  text: faq.question,
                                                ),
                                              ),
                                              const Icon(
                                                Icons.keyboard_arrow_right,
                                                color: ColorsManager.textGray,
                                              ),
                                            ],
                                          ),
                                        ),
                                        if (index !=
                                            displayedQuestions.length -
                                                1) // Exclude divider for the last item
                                          const Divider(
                                            color: ColorsManager.dividerColor,
                                          ),
                                      ],
                                    ),
                                  ),
                                );
                              },
                            )),
                    ],
                  );
          },
        ),
      ),
    );
  }
}