import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

import 'event_details_viewmodel.dart';
import 'package:bahla_front/ui/common/ReadMoreText.dart';
import 'package:bahla_front/ui/common/animator_widget.dart';
import 'package:bahla_front/ui/common/post_card_widget.dart';

class EventDetailsView extends StackedView<EventDetailsViewModel> {
  final int eventId;
  const EventDetailsView({Key? key, required this.eventId}) : super(key: key);

  @override
  Widget builder(
    BuildContext context,
    EventDetailsViewModel viewModel,
    Widget? child,
  ) {
    return PopScope(
      canPop: true,
      onPopInvokedWithResult: (bool didPop, Object? result) {
        viewModel.onBackPressed();
      },
      child: Stack(
        children: [
          DefaultTabController(
            length: 2,
            child: Scaffold(
              backgroundColor: Colors.white,
              body: NestedScrollView(
                headerSliverBuilder: (context, innerBoxIsScrolled) => [
                  SliverToBoxAdapter(
                    child: Column(
                      children: [
                        Container(
                          width: double.infinity,
                          height: MediaQuery.of(context).size.width * 9 / 16,
                          child: const Image(
                            image: AssetImage('assets/images/Affiche.jpg'),
                            fit: BoxFit.cover,
                            alignment: Alignment.center,
                          ),
                        ),
                        Container(
                          color: Colors.white,
                          padding: const EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0, bottom: 0.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              // Titre de l'événement
                              Text(
                                'Disc\'Octonelle 2',
                                style: Theme.of(context).textTheme.headlineLarge?.copyWith(
                                  color: Colors.black,
                                ),
                              ),
                              const SizedBox(height: 16),
                              Center(
                                child: Container(
                                  width: MediaQuery.of(context).size.width * 0.8,
                                  child: Table(
                                    columnWidths: const {
                                      0: FixedColumnWidth(80.0),
                                      1: FlexColumnWidth(),
                                    },
                                    children: [
                                      // Date
                                      TableRow(
                                        children: [
                                          TableCell(
                                            verticalAlignment: TableCellVerticalAlignment.middle,
                                            child: Padding(
                                              padding: const EdgeInsets.symmetric(vertical: 4.0),
                                              child: Align(
                                                alignment: Alignment.centerLeft,
                                                child: Icon(
                                                  Icons.calendar_today,
                                                  size: 30,
                                                  color: Theme.of(context).colorScheme.tertiary,
                                                ),
                                              ),
                                            ),
                                          ),
                                          TableCell(
                                            verticalAlignment: TableCellVerticalAlignment.middle,
                                            child: Padding(
                                              padding: const EdgeInsets.symmetric(vertical: 4.0),
                                              child: Text(
                                                '29.04.2023',
                                                style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                                                  color: Colors.black,
                                                ),
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                      // Lieu
                                      TableRow(
                                        children: [
                                          TableCell(
                                            verticalAlignment: TableCellVerticalAlignment.middle,
                                            child: Padding(
                                              padding: const EdgeInsets.symmetric(vertical: 4.0),
                                              child: Align(
                                                alignment: Alignment.centerLeft,
                                                child: Icon(
                                                  Icons.location_on,
                                                  size: 30,
                                                  color: Theme.of(context).colorScheme.tertiary,
                                                ),
                                              ),
                                            ),
                                          ),
                                          TableCell(
                                            verticalAlignment: TableCellVerticalAlignment.middle,
                                            child: Padding(
                                              padding: const EdgeInsets.symmetric(vertical: 4.0),
                                              child: Column(
                                                crossAxisAlignment: CrossAxisAlignment.start,
                                                children: [
                                                  Text(
                                                    'Anim-Halle',
                                                    style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                                                      color: Colors.black,
                                                      fontWeight: FontWeight.w500,
                                                    ),
                                                  ),
                                                  Text(
                                                    'En Bas-les-Barres 6',
                                                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                                                      color: Colors.grey[800],
                                                    ),
                                                  ),
                                                  Text(
                                                    '2316 Les Ponts-de-martel',
                                                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                                                      color: Colors.grey[800],
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                      // Organisation
                                      TableRow(
                                        children: [
                                          TableCell(
                                            verticalAlignment: TableCellVerticalAlignment.middle,
                                            child: Padding(
                                              padding: const EdgeInsets.symmetric(vertical: 4.0),
                                              child: Align(
                                                alignment: Alignment.centerLeft,
                                                child: Container(
                                                  width: 40,
                                                  height: 40,
                                                  child: Image.asset(
                                                    'images/OCTONELLE.jpg',
                                                    fit: BoxFit.cover,
                                                  ),
                                                ),
                                              ),
                                            ),
                                          ),
                                          TableCell(
                                            verticalAlignment: TableCellVerticalAlignment.middle,
                                            child: Padding(
                                              padding: const EdgeInsets.symmetric(vertical: 4.0),
                                              child: Text(
                                                'L\'Octonelle',
                                                style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                                                  color: Colors.black,
                                                ),
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              const SizedBox(height: 16),
                              // TabBar
                              TabBar(
                                tabs: const [
                                  Tab(text: 'Publications'),
                                  Tab(text: 'À propos'),
                                ],
                                labelColor: Theme.of(context).colorScheme.primary,
                                unselectedLabelColor: Colors.black,
                                indicatorColor: Theme.of(context).colorScheme.primary,
                                tabAlignment: TabAlignment.start,
                                isScrollable: true,
                                labelStyle: Theme.of(context).textTheme.titleLarge,
                                dividerColor: Colors.transparent,
                                onTap: (index) {
                                  viewModel.setSelectedTab(index);
                                },
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
                body: TabBarView(
                  children: [
                    // Tab 1: Publications
                    Container(
                      color: const Color(0xFFEFF0FF),
                      child: ListView.builder(
                        padding: const EdgeInsets.all(16.0),
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return PostCardWidget(
                            title: 'Publication ${index + 1}',
                            content: 'Voici le contenu de la publication ${index + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                            authorName: 'L\'Octonelle',
                            authorImageUrl: '',
                            publishDate: DateTime.now().subtract(Duration(days: index)),
                            imageUrls: index % 3 == 0 ? ['assets/images/Affiche.jpg'] : null,
                            likesCount: (index + 1) * 5,
                            commentsCount: (index + 1) * 2,
                            aspectRatio: 4/5,
                            onLike: () {
                              print('Like publication ${index + 1}');
                            },
                            onComment: () {
                              print('Comment publication ${index + 1}');
                            },
                            onShare: () {
                              print('Share publication ${index + 1}');
                            },
                          );
                        },
                      ),
                    ),
                    // Tab 2: À propos
                    Container(
                      color: const Color(0xFFEFF0FF),
                      child: Column(
                        children: [
                          Container(
                            padding: const EdgeInsets.all(16.0),
                            child: ReadMoreText(
                              'Bienvenue à Disc\'Octonelle 2 ! \n\nRejoignez-nous pour une soirée inoubliable de musique, de danse et de bonne humeur. \n\nQue vous soyez amateur de rock, de pop, de jazz ou d\'électro, il y en aura pour tous les goûts. \nVenez découvrir des artistes locaux et internationaux dans une ambiance conviviale et festive. \nNe manquez pas cette occasion unique de faire la fête et de créer des souvenirs mémorables avec vos amis. Nous avons hâte de vous accueillir à Disc\'Octonelle 2 !',
                              trimLines: 10,
                              collapsedText: '... Voir plus',
                              expandedText: ' Voir moins',
                              textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
                                color: Colors.black,
                                height: 1.4,
                              ),
                            ),
                          ),
                          Divider(height: 2, indent: 20, endIndent: 20, color: Theme.of(context).colorScheme.primary),
                          // The ListView inside a Column needs bounded height => wrap with Expanded
                          Expanded(
                            child: ListView.builder(
                              padding: const EdgeInsets.all(16.0),
                              itemCount: 10,
                              itemBuilder: (context, index) {
                                return Padding(
                                  padding: const EdgeInsets.only(bottom: 12.0),
                                  child: AnimatorWidget(
                                    authorName: 'Animateur ${index + 1}',
                                    authorImageUrl: 'https://placehold.co/400x400/png',
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              ),
          ),
        Positioned(
          top: 20,
          left: 20,
          child: Container(
            //padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.6),
              borderRadius: BorderRadius.circular(20),
            ),
            child: IconButton(
              onPressed: viewModel.onBackPressed,
              icon: const Icon(Icons.arrow_back, size: 20),
            )
          ),
        ),
        ],
      ),
    );
  }

  @override
  EventDetailsViewModel viewModelBuilder(
    BuildContext context,
  ) =>
      EventDetailsViewModel();
}
