hade_hoda_flutter/lib/features/question/presentation/ui/question_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';
import 'package:hadi_hoda_flutter/core/utils/gap.dart';
import 'package:hadi_hoda_flutter/core/utils/my_image.dart';
import 'package:hadi_hoda_flutter/core/utils/my_localization.dart';
import 'package:hadi_hoda_flutter/core/utils/screen_size.dart';
import 'package:hadi_hoda_flutter/core/widgets/answer_box/answer_box.dart';
import 'package:hadi_hoda_flutter/core/widgets/showcase/question_showcase.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_bloc.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/glassy_button.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/left_blob.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/question_stepper.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/refresh_button.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/right_blob.dart';
import 'package:showcaseview/showcaseview.dart';

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

  @override
  Widget build(BuildContext context) {
    return ShowCaseWidget(
      builder: (context) {
        return Scaffold(
          body: Container(
            height: context.heightScreen,
            width: context.widthScreen,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Color(0XFF6930DA), Color(0XFF263AA1)],
              ),
              image: DecorationImage(
                image: AssetImage(MyAssets.pattern),
                scale: 3,
                repeat: ImageRepeat.repeat,
                colorFilter: ColorFilter.mode(
                  Colors.black.withValues(alpha: 0.3),
                  BlendMode.srcIn,
                ),
              ),
            ),
            child: SafeArea(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: MySpaces.s16),
                child: Column(
                  children: [
                    MySpaces.s4.gapHeight,
                    _topButtons(),
                    MySpaces.s10.gapHeight,
                    QuestionStepper(),
                    _titles(),
                    MySpaces.s14.gapHeight,
                    _questions(),
                    _bottomDetail(context),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }

  Widget _topButtons() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        GlassyButton(image: MyAssets.home, onTap: () {}),
        Text(
          'Toothbrushing etiquette',
          style: GoogleFonts.marhey(
            fontSize: 14,
            fontWeight: FontWeight.w700,
            color: Colors.white,
          ),
        ),
        GlassyButton(image: MyAssets.music, onTap: () {}),
      ],
    );
  }

  Column _titles() {
    return Column(
      spacing: MySpaces.s4,
      children: [
        Text(
          'Question 1 / 5',
          style: GoogleFonts.marhey(
            fontSize: 12,
            fontWeight: FontWeight.w500,
            color: Colors.white.withValues(alpha: 0.5),
            shadows: [
              Shadow(
                offset: Offset(0, 1),
                blurRadius: 1,
                color: Color(0xFF000000).withValues(alpha: 0.25),
              ),
            ],
          ),
        ),
        Text(
          'Heda wants her teeth to be clean. Which of her actions do you think is correct?',
         textAlign: TextAlign.center,
          style: GoogleFonts.marhey(
            fontSize: 22,
            fontWeight: FontWeight.w600,
            color: Colors.white,
            shadows: [
              Shadow(
                offset: Offset(0, 1),
                blurRadius: 1,
                color: Color(0xFF000000).withValues(alpha: 0.25),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Expanded _questions() {
    return Expanded(
      child: GridView.builder(
        itemCount: 4,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: MySpaces.s20,
          mainAxisSpacing: 50,
        ),
        itemBuilder: (context, index) => QuestionShowcase(
          globalKey: context.read<QuestionBloc>().keys[index],
          description: context.translate.tap_to_select,
          child: AnswerBox(),
        ),
      ),
    );
  }

  Widget _bottomDetail(BuildContext context) {
    return SizedBox(
      width: context.widthScreen,
      child: Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.center,
        children: [
          PositionedDirectional(
            start: 0,
            top: -10,
            child: LeftBlob(),
          ),
          Padding(
            padding: const EdgeInsetsDirectional.only(end: 60),
            child: MyImage(image: MyAssets.persons),
          ),
          PositionedDirectional(
            start: 210,
            top: -20,
            child: RightBlob(),
          ),
          PositionedDirectional(
            end: 0,
            bottom: 10,
            child: RefreshButton(
              onTap: () {},
            ),
          ),
        ],
      ),
    );
  }
}