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/question_model.dart';
import 'package:syncrow_app/features/shared_widgets/default_button.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/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class QuestionPageSetting extends StatelessWidget {
  final QuestionModel? questionModel;
  final String? deviceId;
  const QuestionPageSetting({super.key, this.questionModel, this.deviceId});

  @override
  Widget build(BuildContext context) {
    return DefaultScaffold(
      title: 'FAQ',
      child: BlocProvider(
        create: (context) => DeviceSettingBloc(deviceId: deviceId!)
          ..add(const DeviceSettingInitial()),
        child: BlocBuilder<DeviceSettingBloc, DeviceSettingState>(
          builder: (context, state) {
            final sensor = BlocProvider.of<DeviceSettingBloc>(context);
            return state is DeviceSettingLoadingState
                ? const Center(
                    child: DefaultContainer(
                        width: 50,
                        height: 50,
                        child: CircularProgressIndicator()),
                  )
                : Column(
                    children: [
                      DefaultContainer(
                        padding: const EdgeInsets.all(15),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            BodyLarge(
                              text: questionModel!.question,
                              fontSize: 22,
                              fontWeight: FontWeight.w400,
                              fontColor: ColorsManager.blackColor,
                            ),
                            const SizedBox(
                              height: 15,
                            ),
                            BodyMedium(
                              text: questionModel!.answer,
                              fontSize: 14,
                              fontWeight: FontWeight.w400,
                              fontColor: ColorsManager.secondaryTextColor,
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: MediaQuery.of(context).size.height * 0.15,
                      ),
                      Center(
                        child: SizedBox(
                          width: 180,
                          child: DefaultButton(
                              backgroundColor: sensor.isHelpful == true
                                  ? ColorsManager.grayColor
                                  : ColorsManager.grayButtonColors,
                              borderRadius: 50,
                              onPressed: () {
                                sensor.add(
                                    const ToggleHelpfulEvent(isHelpful: true));
                              },
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  SvgPicture.asset(
                                    Assets.thumbUp,
                                    fit: BoxFit.fill,
                                  ),
                                  const SizedBox(
                                    width: 10,
                                  ),
                                  const BodyMedium(
                                    text: 'Helpful',
                                    fontSize: 12,
                                    fontWeight: FontWeight.w400,
                                    fontColor: ColorsManager.blackColor,
                                  ),
                                ],
                              )),
                        ),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Center(
                        child: SizedBox(
                          width: 180,
                          child: DefaultButton(
                              backgroundColor: sensor.isHelpful == false
                                  ? ColorsManager.grayColor
                                  : ColorsManager.grayButtonColors,
                              borderRadius: 50,
                              onPressed: () {
                                sensor.add(
                                    const ToggleHelpfulEvent(isHelpful: false));
                              },
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  SvgPicture.asset(
                                    Assets.thumbDown,
                                    fit: BoxFit.fill,
                                  ),
                                  const SizedBox(
                                    width: 10,
                                  ),
                                  const BodyMedium(
                                    text: 'Not Helpful',
                                    fontSize: 12,
                                    fontWeight: FontWeight.w400,
                                    fontColor: ColorsManager.blackColor,
                                  ),
                                ],
                              )),
                        ),
                      ),
                    ],
                  );
          },
        ),
      ),
    );
  }
}