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

import 'event_details_viewmodel.dart';
import '../../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 DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: Colors.white,
        body: SingleChildScrollView(
          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.all(16.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), // Largeur fixe pour les icônes
                        1: FlexColumnWidth(), // Prend l'espace restant
                      },
                      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);
                  },
                ),

              ],
            ),
          ),
          
          // Contenu des onglets basé sur l'index sélectionné
          Container(
            color: const Color(0xFFEFF0FF),
            padding: const EdgeInsets.all(16.0),
            child: viewModel.selectedTabIndex == 0 
              ? Column(
                  mainAxisSize: MainAxisSize.min,
                  children: List.generate(10, (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: '', // URL vide pour utiliser l'icône par défaut
                      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: () {
                        // Action lors du clic sur "J'aime"
                        print('Like publication ${index + 1}');
                      },
                      onComment: () {
                        // Action lors du clic sur "Commenter"
                        print('Comment publication ${index + 1}');
                      },
                      onShare: () {
                        // Action lors du clic sur "Partager"
                        print('Share publication ${index + 1}');
                      },
                    );
                  }),
                )
              : Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'À propos de L\'Octonelle',
                      style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 16),
                    const Text(
                      'Description détaillée de l\'organisation L\'Octonelle et de ses activités...',
                      style: TextStyle(color: Colors.black87),
                    ),
                    // Contenu supplémentaire pour tester le scroll
                    ...List.generate(20, (index) => Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: Text('Ligne de contenu ${index + 1}'),
                    )),
                  ],
                ),
          ),
            ],
          ),
        ),
      ),
    );
  }

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