import 'package:flutter/material.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/aabout_us/about_us_screen.dart';
import 'package:sonnat/features/main/widget/main_item_widget.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: Column(
        children: [
          Container(
            margin: EdgeInsets.only(
              top: context.height * 20 / AppConstants.instance.appHeight,
              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,
            ),
          ),
          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(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Text(
                  Translator.translate('search_term'),
                  style: const TextStyle(
                    color: Color(0xffBCC1CD),
                    fontSize: 16,
                  ),
                ),
                SizedBox(width: context.width * 14 / AppConstants.instance.appWidth),
                SvgPicture.asset('ic_search'.svgPath),
              ],
            ),
          ),
          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}) {
    switch (index) {
      case 0:
        Navigator.push(context, MaterialPageRoute(
          builder: (context) {
            return PostsScreen(title: _names[index]);
          },
        ));
        break;
      case 1:
        Navigator.push(context, MaterialPageRoute(
          builder: (context) {
            return PostsScreen(title: _names[index]);
          },
        ));
        break;
      case 2:
        Navigator.push(context, MaterialPageRoute(
          builder: (context) {
            return PostsScreen(title: _names[index]);
          },
        ));
        break;
      case 3:
        Navigator.push(context, MaterialPageRoute(
          builder: (context) {
            return PostsScreen(title: _names[index]);
          },
        ));
        break;
      case 4:
        Navigator.push(context, MaterialPageRoute(
          builder: (context) {
            return PostsScreen(title: _names[index]);
          },
        ));
        break;
      case 5:
        Navigator.push(context, MaterialPageRoute(
          builder: (context) {
            return const AboutUsScreen();
          },
        ));
        break;
    }
  }
}