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/utils/app_constants.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<Map<String, String>> _names = [
    {'name': Translator.translate('forbidden'), 'catId': '77,78,79'},
    {'name': Translator.translate('doubts'), 'catId': '83'},
    {'name': Translator.translate('criticism_of_ideas'), 'catId': '101'},
    {'name': Translator.translate('specials'), 'catId': '109'},
    {'name': Translator.translate('news'), 'catId': '104'},
    {'name': Translator.translate('video'), 'catId': ''},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff26237A),
      body: SafeArea(
        child: Column(
          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,
              ),
            ),
            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(lastCatId: '77,78,79'),
                        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]['name']!),
                    onTap: () => _openItem(index: 2),
                  ),
                  SizedBox(width: context.width * 13 / AppConstants.instance.appWidth),
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[1], name: _names[1]['name']!),
                    onTap: () => _openItem(index: 1),
                  ),
                  SizedBox(width: context.width * 13 / AppConstants.instance.appWidth),
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[0], name: _names[0]['name']!),
                    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]['name']!),
                    onTap: () => _openItem(index: 5),
                  ),
                  SizedBox(width: context.width * 13 / AppConstants.instance.appWidth),
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[4], name: _names[4]['name']!),
                    onTap: () => _openItem(index: 4),
                  ),
                  SizedBox(width: context.width * 13 / AppConstants.instance.appWidth),
                  GestureDetector(
                    child: MainItemWidget(icon: _icons[3], name: _names[3]['name']!),
                    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(lastCatId: _names[index]['catId']!),
            child: PostsScreen(
              title: _names[index]['name']!,
              showFilters: index == 0,
            ),
          );
        },
      ),
    );
  }
}