import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_scatter/flutter_scatter.dart';
import 'package:konectar_events/utils/constants.dart';
import 'package:konectar_events/utils/util.dart';
import 'package:konectar_events/widgets/customappbar.dart';
import 'package:konectar_events/widgets/customeventsappbar.dart';

import 'package:konectar_events/widgets/flutter_hashtags.dart';
import 'package:konectar_events/widgets/heatmapcalendar.dart';
import 'package:konectar_events/widgets/timelinechart.dart';
import 'package:konectar_events/widgets/word_cloud.dart';

import 'package:word_cloud/word_cloud_data.dart';
import 'package:word_cloud/word_cloud_view.dart';

class SocialMedia extends StatefulWidget {
  SocialMedia({
    super.key,
  });

  @override
  State<SocialMedia> createState() => _SocialMediaState();
}

class _SocialMediaState extends State<SocialMedia> {
  String _value = 'My Events Insights';

  int count = 0;
  String wordstring = '';

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    final ratio = screenSize.width / (screenSize.height / 2);
    return Scaffold(
      backgroundColor: EventsConstants.bgcolor,
      // appBar: CustomAppBar(
      //   title: "Social Media",
      //   fontColor: Colors.black,
      //   backgroundcolor: Constants.bgcolor,
      // ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 12.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Text(
              //   '2024 Hematology/Oncology Pharmacy Association Annual Conference (HOPA)',
              //   style: TextStyle(
              //     color: Colors.blue,
              //     fontWeight: FontWeight.bold,
              //     fontSize: 17,
              //   ),
              //   maxLines: 2,
              //   softWrap: true,
              //   overflow: TextOverflow.ellipsis,
              // ),
              // SizedBox(
              //   height: 20,
              // ),
              labelWidget("#Tag Cloud"),
              Card(
                surfaceTintColor: Colors.white,
                child: Container(
                  padding: EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      color: Colors.white),
                  child: isTablet
                      ? Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: tagCloudWidgets(context),
                        )
                      : Column(
                          children: tagCloudWidgets(context),
                        ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              labelWidget("#Tag Analysis"),
              Card(
                surfaceTintColor: Colors.white,
                child: Container(
                    padding: EdgeInsets.all(8.0),
                    margin: EdgeInsets.all(10.0),
                    // height:
                    //     isTablet ? screenSize.height / 4 : screenSize.height / 2,
                    width: screenSize.width,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                        color: Colors.white),
                    child: Center(child: buildGridView(context))),
              ),
              SizedBox(
                height: 20,
              ),
              labelWidget("Tweet by timeline"),
              Card(
                surfaceTintColor: Colors.white,
                child: Container(
                    padding: EdgeInsets.all(8.0),
                    margin: EdgeInsets.all(10.0),
                    height: screenSize.height / 3,
                    width: screenSize.width,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                        color: Colors.white),
                    child: TimelineChart()),
              ),
              SizedBox(
                height: 20,
              ),
              labelWidget("Top Tweets"),
              Card(
                surfaceTintColor: Colors.white,
                child: Container(
                  //padding: EdgeInsets.all(8.0),
                  margin: EdgeInsets.all(8.0),
                  height: screenSize.height / 2,
                  width: screenSize.width,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      color: Colors.white),
                  child: ListView.builder(
                    padding: EdgeInsets.all(8.0),
                    itemCount: 5,
                    itemBuilder: (context, index) {
                      return Card(
                        child: ExpansionTile(
                          shape: Border(),
                          expandedCrossAxisAlignment: CrossAxisAlignment.start,
                          expandedAlignment: Alignment.topLeft,
                          childrenPadding: EdgeInsets.all(12.0),
                          title: Text("${index + 1}.Hany Ragy"),
                          subtitle: Text(
                            "Total Engagements:10",
                            style: TextStyle(
                                color: Colors.grey[700], fontSize: 12.0),
                          ),
                          children: [
                            Text(
                              "Cardiologist,Expert in Women & Heart Disease, Prevention, Author Saving Women\'s\n Hearts - Heals President of ASPC #earlyinterventionalist @CedarsSinai",
                              maxLines: 3,
                              style: TextStyle(
                                  // decoration: TextDecoration.underline,
                                  // decorationColor: Colors.blue,
                                  fontFamily: "SourceSerif",
                                  color: Colors.grey[700],

                                  //fontStyle: FontStyle.italic,
                                  fontSize: 14),
                            ),

                            // Text(
                            //   "Notes : ${sessionNotesList[index]}",
                            //   maxLines: 3,
                            //   style: TextStyle(
                            //       // decoration: TextDecoration.underline,
                            //       // decorationColor: Colors.blue,
                            //       fontFamily: "SourceSerif",
                            //       color: Colors.grey[700],

                            //       //fontStyle: FontStyle.italic,
                            //       fontSize: 14),
                            // ),
                          ],
                        ),
                      );
                    },
                    // separatorBuilder: (context, index) {
                    //   return Divider();
                    // },
                  ),
                ),
              ),
              // Container(
              //     //padding: EdgeInsets.all(8.0),
              //     margin: EdgeInsets.all(12.0),
              //     height: screenSize.height / 3,
              //     width: screenSize.width,
              //     decoration: BoxDecoration(
              //         border: Border.all(color: Colors.blueAccent)),
              //     child: Column(
              //       children: [
              //         Container(
              //           decoration: BoxDecoration(
              //               color: Colors.blueAccent,
              //               border: Border.all(color: Colors.blueAccent)),
              //           child: Padding(
              //             padding: const EdgeInsets.all(8.0),
              //             child: Row(
              //               mainAxisAlignment: MainAxisAlignment.start,
              //               crossAxisAlignment: CrossAxisAlignment.start,
              //               children: [
              //                 Text(
              //                   "SLNO.",
              //                   style: TextStyle(
              //                       fontSize: isTablet ? 18 : 14,
              //                       color: Colors.white),
              //                 ),
              //                 SizedBox(
              //                   width: 10,
              //                 ),
              //                 Text(
              //                   "Handle",
              //                   style: TextStyle(
              //                       fontSize: isTablet ? 18 : 14,
              //                       color: Colors.white),
              //                 ),
              //                 const Spacer(),
              //                 Text(
              //                   "Tweet",
              //                   style: TextStyle(
              //                       fontSize: isTablet ? 18 : 14,
              //                       color: Colors.white),
              //                 ),
              //                 const Spacer(),
              //                 Text(
              //                   "Total Engagement",
              //                   style: TextStyle(
              //                       fontSize: isTablet ? 18 : 14,
              //                       color: Colors.white),
              //                 ),
              //               ],
              //             ),
              //           ),
              //         ),
              //         Expanded(
              //           child: ListView.builder(
              //             itemCount: 10,
              //             padding: EdgeInsets.all(8.0),
              //             itemBuilder: (context, index) {
              //               return SizedBox(
              //                 height: 80,
              //                 child: Card(
              //                   child: Padding(
              //                     padding: const EdgeInsets.all(8.0),
              //                     child: Row(
              //                       mainAxisAlignment:
              //                           MainAxisAlignment.spaceBetween,
              //                       crossAxisAlignment:
              //                           CrossAxisAlignment.start,
              //                       children: [
              //                         Text(
              //                           "${index + 1} ",
              //                           style: TextStyle(fontSize: 14),
              //                         ),
              //                         SizedBox(
              //                           width: 10,
              //                         ),
              //                         Text(
              //                           "Stafeini Janson",
              //                           style: TextStyle(
              //                             fontSize: isTablet ? 18 : 14,
              //                           ),
              //                         ),
              //                         SizedBox(
              //                           width: 30,
              //                         ),
              //                         Flexible(
              //                           child: Text(
              //                             "This is the body of the tweet, where users can express their thoughts using up to 280 characters. Text can include a mixture of letters, numbers, symbols, and even emojis. 2.",
              //                             style: TextStyle(
              //                                 fontSize: isTablet ? 18 : 14,
              //                                 overflow: TextOverflow.ellipsis),
              //                             maxLines: 4,
              //                           ),
              //                         ),
              //                         SizedBox(
              //                           width: 30,
              //                         ),
              //                         Text(
              //                           "0",
              //                           style: TextStyle(
              //                             fontSize: isTablet ? 18 : 14,
              //                           ),
              //                         ),
              //                       ],
              //                     ),
              //                   ),
              //                 ),
              //               );
              //             },
              //           ),
              //         ),
              //       ],
              //     )),
              SizedBox(
                height: 20,
              ),
              labelWidget("Top Profiles"),
              Card(
                surfaceTintColor: Colors.white,
                child: Container(
                  //padding: EdgeInsets.all(8.0),
                  margin: EdgeInsets.all(4.0),
                  height: screenSize.height / 2,
                  width: screenSize.width,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      color: Colors.white),

                  child: ListView.builder(
                    padding: EdgeInsets.all(8.0),
                    itemCount: 5,
                    itemBuilder: (context, index) {
                      return Card(
                        child: ExpansionTile(
                          shape: Border(),
                          expandedCrossAxisAlignment: CrossAxisAlignment.start,
                          expandedAlignment: Alignment.topLeft,
                          childrenPadding: EdgeInsets.all(12.0),
                          title: Text("${index + 1}.Hany Ragy"),
                          subtitle: Row(
                            children: [
                              Text(
                                "Followers:63.8K",
                                style: TextStyle(
                                    color: Colors.grey[700], fontSize: 12.0),
                              ),
                              const Spacer(),
                              Text(
                                "Tweets:10",
                                style: TextStyle(
                                    color: Colors.grey[700], fontSize: 12.0),
                              ),
                            ],
                          ),
                          children: [
                            Text(
                              "Cardiologist,Expert in Women & Heart Disease, Prevention, Author Saving Women\'s Hearts - Heals President of ASPC #earlyinterventionalist @CedarsSinai",
                              maxLines: 3,
                              style: TextStyle(
                                  // decoration: TextDecoration.underline,
                                  // decorationColor: Colors.blue,
                                  fontFamily: "SourceSerif",
                                  color: Colors.grey[700],

                                  //fontStyle: FontStyle.italic,
                                  fontSize: 14),
                            ),
                            SizedBox(
                              height: 8,
                            ),

                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Container(
                                  height: isTablet ? 40 : 34,
                                  width: isTablet ? 40 : 24,
                                  decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Colors.green,
                                  ),
                                  child: Icon(
                                    Icons.thumb_up,
                                    color: Colors.white,
                                    size: isTablet ? 24 : 14,
                                  ),
                                  alignment: Alignment.center,
                                ),
                                Text(" 65 %"),
                                SizedBox(
                                  width: 8,
                                ),
                                Container(
                                  height: isTablet ? 40 : 24,
                                  width: isTablet ? 40 : 24,
                                  decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Colors.yellow,
                                  ),
                                  child: Row(
                                    children: [
                                      Center(
                                        child: Icon(
                                          Icons.thumbs_up_down,
                                          color: Colors.white,
                                          size: isTablet ? 24 : 14,
                                        ),
                                      ),
                                    ],
                                  ),
                                  alignment: Alignment.center,
                                ),
                                Text(" 100 % "),
                                SizedBox(
                                  width: 8,
                                ),
                                Container(
                                  height: isTablet ? 40 : 34,
                                  width: isTablet ? 40 : 24,
                                  decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Colors.red,
                                  ),
                                  child: Icon(
                                    Icons.thumb_down,
                                    color: Colors.white,
                                    size: isTablet ? 24 : 14,
                                  ),
                                  alignment: Alignment.center,
                                ),
                                Text("  0 % "),
                              ],
                            ),
                            // Text(
                            //   "Notes : ${sessionNotesList[index]}",
                            //   maxLines: 3,
                            //   style: TextStyle(
                            //       // decoration: TextDecoration.underline,
                            //       // decorationColor: Colors.blue,
                            //       fontFamily: "SourceSerif",
                            //       color: Colors.grey[700],

                            //       //fontStyle: FontStyle.italic,
                            //       fontSize: 14),
                            // ),
                          ],
                        ),
                      );
                    },
                    // separatorBuilder: (context, index) {
                    //   return Divider();
                    // },
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              labelWidget("Posting Activity"),
              Card(
                surfaceTintColor: Colors.white,
                child: Container(
                  //padding: EdgeInsets.all(8.0),
                  margin: EdgeInsets.all(12.0),
                  // height: screenSize.height / 2,
                  width: screenSize.width,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      color: Colors.white),
                  child: HeatMapExample(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget labelWidget(String title) {
    return Text(
      title,
      style: TextStyle(
        color: Colors.black,
        fontWeight: FontWeight.bold,
        fontSize: 17,
      ),
      maxLines: 2,
      softWrap: true,
      overflow: TextOverflow.ellipsis,
    );
  }

  List<Widget> tagCloudWidgets(BuildContext context) {
    List<Widget> widgets = <Widget>[];
    for (var i = 0; i < kFSocialMediaHashtags.length; i++) {
      widgets.add(ScatterItem(kFSocialMediaHashtags[i], i));
    }
    final screenSize = MediaQuery.of(context).size;
    final ratio = screenSize.width / (screenSize.height / 2);
    return [
      Container(
        padding: EdgeInsets.all(2.0),
        // margin: EdgeInsets.all(2.0),
        height: screenSize.height / 3,
        width: isTablet ? screenSize.width / 2 : screenSize.width,
        //decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
        child: FittedBox(
          child: Scatter(
            fillGaps: true,
            delegate: ArchimedeanSpiralScatterDelegate(ratio: ratio),
            children: widgets,
          ),
        ),
      ),
      isTablet
          ? SizedBox.shrink()
          : SizedBox(
              height: 10,
            ),
      ExpansionTile(
          initiallyExpanded: true,
          shape: Border(),
          title: buildTextFieldWidget(context),
          children: [
            Container(
              padding: EdgeInsets.all(6.0),
              //margin: EdgeInsets.all(2.0),
              height: screenSize.height / 3,
              width: isTablet ? screenSize.width / 2.5 : screenSize.width,
              // decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Expanded(
                    child: ListView.builder(
                      itemCount: 4,
                      itemBuilder: (context, index) {
                        return SizedBox(
                            height: 50,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text("CleanEating"),
                                SizedBox(
                                  width: 200,
                                  height: 20,
                                  child: LinearProgressIndicator(
                                    backgroundColor: Colors.grey,
                                    color: Colors.cyan,
                                    minHeight: 20,
                                    value: 25.0,
                                  ),
                                )
                              ],
                            ));
                      },
                    ),
                  ),
                ],
              ),
            ),
          ]),
    ];
  }

  Widget buildContainer(BuildContext context, Widget child, var screenSize) {
    return Container(
        padding: EdgeInsets.all(6.0),
        //margin: EdgeInsets.all(2.0),
        height: screenSize.height / 3,
        width: isTablet ? screenSize.width / 2.5 : screenSize.width,
        // decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
        child: child);
  }

  Widget buildGridView(BuildContext context) {
    return GridView.count(
        crossAxisCount: isTablet ? 4 : 3,
        shrinkWrap: true,
        crossAxisSpacing: 6,
        childAspectRatio: 1.4,
        padding: isTablet
            ? EdgeInsets.only(left: 30, right: 10, top: 10, bottom: 10)
            : EdgeInsets.zero,
        children: List.generate(tagAnalysisList.length, (i) {
          return Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: isTablet ? 40 : 34,
                width: isTablet ? 40 : 34,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Color.fromARGB(255, 186, 225, 249),
                ),
                child: Icon(
                  tagAnalysisList[i].icon,
                  color: Colors.white,
                  size: isTablet ? 24 : 18,
                ),
                alignment: Alignment.center,
              ),
              SizedBox(
                width: 4,
              ),
              Column(
                children: [
                  Text(
                    tagAnalysisList[i].number,
                    style: TextStyle(fontSize: 24),
                  ),
                  Text(tagAnalysisList[i].tag),
                ],
              )
            ],
          );
        }));
  }

  Widget buildTextFieldWidget(BuildContext context) {
    var selecttextEditingController;
    return SizedBox(
      width: isTablet ? 300 : MediaQuery.of(context).size.width,
      height: isTablet ? 40 : 40,
      child: TextField(
        textAlignVertical: TextAlignVertical.center,
        cursorHeight: 16.0,
        maxLines: 1,
        controller:
            selecttextEditingController, //editing controller of this TextField
        decoration: InputDecoration(
          // border: OutlineInputBorder(),
          hintText: 'Search',
          alignLabelWithHint: true,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          hintStyle: const TextStyle(
            fontSize: 14,
          ),
        ),
      ),
    );
  }

  Widget bargraph() {
    return BarChart(BarChartData(
        borderData: FlBorderData(
            border: const Border(
          top: BorderSide(width: 1),
          right: BorderSide(width: 1),
          left: BorderSide.none,
          bottom: BorderSide.none,
        )),
        groupsSpace: 10,
        barGroups: [
          BarChartGroupData(x: 1, barRods: [
            BarChartRodData(fromY: 0, toY: 0, width: 15, color: Colors.amber),
          ]),
          BarChartGroupData(x: 2, barRods: [
            BarChartRodData(fromY: 0, toY: 0, width: 15, color: Colors.amber),
          ]),
          BarChartGroupData(x: 3, barRods: [
            BarChartRodData(fromY: 10, toY: 15, width: 15, color: Colors.amber),
          ]),
          // BarChartGroupData(x: 4, barRods: [
          //   BarChartRodData(fromY: 0, toY: 10, width: 15, color: Colors.amber),
          // ]),
          // BarChartGroupData(x: 5, barRods: [
          //   BarChartRodData(fromY: 0, toY: 11, width: 15, color: Colors.amber),
          // ]),
          // BarChartGroupData(x: 6, barRods: [
          //   BarChartRodData(fromY: 0, toY: 10, width: 15, color: Colors.amber),
          // ]),
          // BarChartGroupData(x: 7, barRods: [
          //   BarChartRodData(fromY: 0, toY: 10, width: 15, color: Colors.amber),
          // ]),
          // BarChartGroupData(x: 8, barRods: [
          //   BarChartRodData(fromY: 0, toY: 10, width: 15, color: Colors.amber),
          // ]),
        ]));
  }
}

class PieChartWidget extends StatelessWidget {
  final List<Sector> sectors;

  const PieChartWidget(this.sectors, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
        aspectRatio: 1.0,
        child: PieChart(PieChartData(
          sections: _chartSections(sectors),
          centerSpaceRadius: 58.0,
        )));
  }

  List<PieChartSectionData> _chartSections(List<Sector> sectors) {
    final List<PieChartSectionData> list = [];
    for (var sector in sectors) {
      const double radius = 40.0;
      final data = PieChartSectionData(
        color: sector.color,
        value: sector.value,
        radius: radius,
        title: sector.title,
      );
      list.add(data);
    }
    return list;
  }
}

class SmallPieChartWidget extends StatelessWidget {
  final List<Sector> sectors;

  const SmallPieChartWidget(this.sectors, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
        aspectRatio: 2.0,
        child: PieChart(PieChartData(
          sections: _chartSections(sectors),
          centerSpaceRadius: 2.0,
        )));
  }

  List<PieChartSectionData> _chartSections(List<Sector> sectors) {
    final List<PieChartSectionData> list = [];
    for (var sector in sectors) {
      const double radius = 100.0;
      final data = PieChartSectionData(
        color: sector.color,
        value: sector.value,
        radius: radius,
        title: sector.title,
      );
      list.add(data);
    }
    return list;
  }
}

class Sector {
  final Color color;
  final double value;
  final String title;
  Sector({required this.color, required this.value, required this.title});
}