import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sonnat/core/extensions/context_extension.dart';
import 'package:sonnat/core/extensions/string_extension.dart';
import 'package:sonnat/core/language/translator.dart';
import 'package:sonnat/core/select_language/cubit/select_language_cubit.dart';
import 'package:sonnat/core/select_language/screen/select_language_screen.dart';
import 'package:sonnat/core/utils/app_constants.dart';
import 'package:sonnat/core/widgets/more_options_widget.dart';
import 'package:sonnat/features/about_us/about_us_screen.dart';
import 'package:sonnat/features/main/widget/main_item_widget.dart';
import 'package:sonnat/features/posts/cubit/posts_cubit.dart';
import 'package:sonnat/features/posts/screen/posts_screen.dart';

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  final List<String> _icons = [
    'ic_mataen',
    'ic_shobahat',
    'ic_aqayed',
    'ic_vijeha',
    'ic_akhbar',
    'ic_video',
  ];
  final List<String> _names = [
    Translator.translate('forbidden'),
    Translator.translate('doubts'),
    Translator.translate('criticism_of_ideas'),
    Translator.translate('specials'),
    Translator.translate('news'),
    Translator.translate('video'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff26237A),
      body: SafeArea(
        child: Column(
          children: [
            Stack(
              children: [
                Container(
                  margin: EdgeInsets.only(
                    left: context.width * 86 / AppConstants.instance.appWidth,
                    right: context.width * 86 / AppConstants.instance.appWidth,
                  ),
                  child: Image.asset(
                    'ic_main_header'.pngPath,
                    width: context.width * 200 / AppConstants.instance.appWidth,
                    height: context.height * 200 / AppConstants.instance.appHeight,
                  ),
                ),
                PositionedDirectional(
                  end: context.width * 35 / AppConstants.instance.appWidth,
                  top: 16,
                  child: Align(
                    alignment: AlignmentDirectional.centerStart,
                    child: GestureDetector(
                      onTap: _showOptions,
                      child: SvgPicture.asset('ic_more'.svgPath),
                    ),
                  ),
                ),
              ],
            ),
            Text(
              Translator.translate('main_header_text'),
              style: const TextStyle(
                color: Color(0xffFFD800),
                fontSize: 28,
              ),
            ),
            Text(
              Translator.translate('second_header_text'),
              style: const TextStyle(
                color: Color(0xffDEDEDE),
                fontSize: 16,
              ),
            ),
            GestureDetector(
              onTap: () {
                Navigator.push(context, MaterialPageRoute(
                  builder: (context) {
                    return BlocProvider(
                      create: (context) => PostsCubit(),
                      child: const PostsScreen(title: '', searchMode: true),
                    );
                  },
                ));
              },
              child: Container(
                decoration: BoxDecoration(
                  color: const Color(0xffF4F4F8),
                  borderRadius: BorderRadius.circular(22),
                ),
                margin: EdgeInsets.only(
                  left: context.width * 35 / AppConstants.instance.appWidth,
                  right: context.width * 35 / AppConstants.instance.appWidth,
                  top: context.height * 40 / AppConstants.instance.appHeight,
                  bottom: context.height * 60 / AppConstants.instance.appHeight,
                ),
                padding: EdgeInsets.symmetric(
                  vertical: context.height * 13 / AppConstants.instance.appHeight,
                  horizontal: context.width * 8 / AppConstants.instance.appWidth,
                ),
                child: Row(
                  children: [
                    SvgPicture.asset('ic_search'.svgPath),
                    SizedBox(width: context.width * 14 / AppConstants.instance.appWidth),
                    Text(
                      Translator.translate('search_term'),
                      style: const TextStyle(
                        color: Color(0xffBCC1CD),
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SvgPicture.asset('ic_line'.svgPath),
            SizedBox(height: context.height * 30 / AppConstants.instance.appHeight),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: context.width * 35 / AppConstants.instance.appWidth),
              child: Row(
                children: [
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[2], name: _names[2]),
                    onTap: () => _openItem(index: 2),
                  ),
                  SizedBox(width: context.width * 13 / AppConstants.instance.appWidth),
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[1], name: _names[1]),
                    onTap: () => _openItem(index: 1),
                  ),
                  SizedBox(width: context.width * 13 / AppConstants.instance.appWidth),
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[0], name: _names[0]),
                    onTap: () => _openItem(index: 0),
                  ),
                ],
              ),
            ),
            SizedBox(height: context.height * 10 / AppConstants.instance.appHeight),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: context.width * 35 / AppConstants.instance.appWidth),
              child: Row(
                children: [
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[5], name: _names[5]),
                    onTap: () => _openItem(index: 5),
                  ),
                  SizedBox(width: context.width * 13 / AppConstants.instance.appWidth),
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[4], name: _names[4]),
                    onTap: () => _openItem(index: 4),
                  ),
                  SizedBox(width: context.width * 13 / AppConstants.instance.appWidth),
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[3], name: _names[3]),
                    onTap: () => _openItem(index: 3),
                  ),
                ],
              ),
            ),
            SizedBox(height: context.height * 20 / AppConstants.instance.appHeight),
          ],
        ),
      ),
    );
  }

  void _openItem({required int index}) {
    Navigator.push(context, MaterialPageRoute(
      builder: (context) {
        return BlocProvider(
          create: (context) => PostsCubit(),
          child: PostsScreen(title: _names[index]),
        );
      },
    ));
  }

  void _showOptions() {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) {
        return Container(
          height: 120,
          width: context.width,
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.white, width: 0.2),
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(16),
              topRight: Radius.circular(16),
            ),
          ),
          padding: const EdgeInsets.only(
            top: 16,
            left: 4,
            right: 4,
          ),
          child: Column(
            children: [
              MoreOptionsWidget(
                title: Translator.translate('about_us'),
                onTap: () {
                  Navigator.pop(context);
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) {
                        return const AboutUsScreen();
                      },
                    ),
                  );
                },
              ),
              const SizedBox(height: 8),
              Container(
                width: context.width,
                height: 1,
                color: const Color(0xffD3D8E9),
              ),
              const SizedBox(height: 8),
              MoreOptionsWidget(
                title: Translator.translate('select_language'),
                onTap: () {
                  Navigator.pop(context);
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) {
                        return BlocProvider(
                          child: const SelectLanguageScreen(),
                          create: (context) => SelectLanguageCubit(),
                        );
                      },
                    ),
                  );
                },
              ),
            ],
          ),
        );
      },
    );
  }
}