import 'package:didvan/views/home/media/podcast_tab_page.dart';
import 'package:didvan/views/home/media/videocast_tab_page.dart';
import 'package:didvan/views/home/media/widgets/media_banner_with_thumbnails.dart';
import 'package:didvan/views/home/media/widgets/banner_grid_view.dart';
import 'package:didvan/views/widgets/home_app_bar.dart';
import 'package:didvan/views/widgets/custom_media_tab_bar.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:didvan/views/podcasts/podcasts_state.dart';
import 'package:didvan/views/home/infography/infography_screen_state.dart';

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

  @override
  State<MediaPage> createState() => _MediaPageState();
}

class _MediaPageState extends State<MediaPage> {
  int _currentIndex = 0;
  final PageController _pageController = PageController();

  final List<String> _categories = [
    'پادکست‌',
    'ویدیوکست',
    'فولادینفو',
    'اینفوگرافی',
  ];

  final List<String> _iconPaths = [
    'lib/assets/icons/microphone-2.svg',
    'lib/assets/icons/video-play.svg',
    'lib/assets/icons/streamline-plump_factory-plant.svg',
    'lib/assets/icons/hugeicons_chart-02.svg',
  ];

  void _onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
    _pageController.animateToPage(
      index,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.background,
      body: SafeArea(
        child: Column(
          children: [
            const HomeAppBar(
              showBackButton: false,
              showSearchField: true,
            ),
            CustomMediaTabBar(
              currentIndex: _currentIndex,
              onTap: _onTabTapped,
              categories: _categories,
              iconPaths: _iconPaths,
              customIndicatorPath: 'assets/icons/tab_indicator.svg',
            ),
            Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(horizontal: 7),
              child: Container(
                height: 2,
                color: const Color.fromRGBO(184, 184, 184, 1),
              ),
            ),
            Expanded(
              child: PageView(
                controller: _pageController,
                onPageChanged: (index) {
                  setState(() {
                    _currentIndex = index;
                  });
                },
                children: [
                  ChangeNotifierProvider(
                    create: (_) => PodcastsState(),
                    child:
                        const PodcastTabPage(key: ValueKey('PodcastTabPage')),
                  ),
                  ChangeNotifierProvider(
                    create: (_) => PodcastsState(),
                    child: const VideoCastTabPage(
                        key: ValueKey('VideoCastTabPage')),
                  ),
                  const SingleChildScrollView(
                    key: ValueKey('MainPageBanner'),
                    child: Padding(
                      padding: EdgeInsets.symmetric(
                          horizontal: 16.0, vertical: 16.0),
                      child: MediaBannerWithThumbnails(isFirst: true),
                    ),
                  ),
                  ChangeNotifierProvider(
                    create: (_) => InfographyScreenState(),
                    child: const SingleChildScrollView(
                      key: ValueKey('InfographyPage'),
                      child: Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: 8.0, vertical: 16.0),
                        child: BannerGridView(),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}