import 'package:bus_infotainment/pages/components/ibus_display.dart';
import 'package:bus_infotainment/singletons/live_information.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class pages_Home extends StatelessWidget {
  const pages_Home({super.key});

  @override
  Widget build(BuildContext context) {

    return Container(

      width: double.infinity,

      margin: const EdgeInsets.all(10),

      child: Column(

        crossAxisAlignment: CrossAxisAlignment.start,

        children: [

          // Text("Home Page"),

          ibus_display(),

          SizedBox(
            height: 10,
          ),

          _QuickAnnouncements_IBUS(),

          SizedBox(
            height: 10,
          ),

          QuickAnnouncement(),

        ],
      )

    );
  }
}

class _QuickAnnouncements_IBUS extends StatefulWidget {


  _QuickAnnouncements_IBUS({super.key});

  @override
  State<_QuickAnnouncements_IBUS> createState() => _QuickAnnouncementsState_IBUS();
}

class _QuickAnnouncementsState_IBUS extends State<_QuickAnnouncements_IBUS> {

  List<Widget> announcements = [];

  int _currentIndex = 0;

  _QuickAnnouncementsState_IBUS() {
    LiveInformation liveInformation = LiveInformation();

    for (ManualAnnouncementEntry announcement in liveInformation.manualAnnouncements) {
      announcements.add(
          _QuickAnnouncement_IBUS(announcement: announcement, index: liveInformation.manualAnnouncements.indexOf(announcement))
      );
    }
  }

  @override
  Widget build(BuildContext context) {


    return Container(

      decoration: BoxDecoration(
        color: Colors.lightGreen.shade100,
        border: Border.all(
          color: Colors.black,
          width: 2
        ),



      ),

      padding: const EdgeInsets.all(2),

      child: Column(
        children: [
          Container(
            height: 2,
            color: Colors.black,
          ),

          if (_currentIndex < announcements.length)
            announcements[_currentIndex + 0]
          else
            Container(
              height: 50,
              decoration: BoxDecoration(
                color: Colors.lightGreen.shade100,
                border: const Border.symmetric(
                    vertical: BorderSide(
                        color: Colors.black,
                        width: 2
                    )
                ),
              ),
            ),

          Container(
            height: 2,
            color: Colors.black,
          ),

          if (_currentIndex + 1 < announcements.length)
            announcements[_currentIndex + 1]
          else
            Container(
              height: 50,
              decoration: BoxDecoration(
                color: Colors.lightGreen.shade100,
                border: const Border.symmetric(
                    vertical: BorderSide(
                        color: Colors.black,
                        width: 2
                    )
                ),
              ),
            ),

          Container(
            height: 2,
            color: Colors.black,
          ),

          if (_currentIndex + 2 < announcements.length)
            announcements[_currentIndex + 2]
          else
            Container(
              height: 50,
              decoration: BoxDecoration(
                color: Colors.lightGreen.shade100,
                border: const Border.symmetric(
                    vertical: BorderSide(
                        color: Colors.black,
                        width: 2
                    )
                ),
              ),
            ),

          Container(
            height: 2,
            color: Colors.black,
          ),

          if (_currentIndex + 3 < announcements.length)
            announcements[_currentIndex + 3]
          else
            Container(
              height: 50,
              decoration: BoxDecoration(
                color: Colors.lightGreen.shade100,
                border: const Border.symmetric(
                    vertical: BorderSide(
                        color: Colors.black,
                        width: 2
                    )
                ),
              ),
            ),

          Container(
            height: 2,
            color: Colors.black,
          ),

          Container(
            height: 40,
            decoration: BoxDecoration(
              color: Colors.lightGreen.shade100,
              border: const Border.symmetric(
                vertical: BorderSide(
                  color: Colors.black,
                  width: 2
                )
              ),
            ),

            alignment: Alignment.centerRight,

            child: Row(

              mainAxisSize: MainAxisSize.min,

              children: [

                Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      color: Colors.lightGreen.shade100,
                      border: const Border.symmetric(
                          vertical: BorderSide(
                              color: Colors.black,
                              width: 2
                          )
                      ),
                    ),

                    margin: const EdgeInsets.symmetric(
                        horizontal: 4
                    ),

                    child: Container(
                      child: Stack(
                        children: [
                          Container(
                            width: 40,
                            height: 40,
                            child: Icon(
                              Icons.arrow_upward,
                              color: Colors.black,
                            ),
                          ),
                          Positioned.fill(
                            child: ElevatedButton(
                              onPressed: () {
                                _currentIndex = wrap(_currentIndex - 4, 0, announcements.length);
                                setState(() {});
                                print(_currentIndex);
                              },
                              style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.transparent,
                                shadowColor: Colors.transparent,
                                surfaceTintColor: Colors.transparent,
                                foregroundColor: Colors.transparent,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(0),
                                ),
                              ),
                              child: const Text(""),
                            ),
                          )
                        ],
                      ),
                    )

                ),

                Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      color: Colors.lightGreen.shade100,
                      border: const Border.symmetric(
                          vertical: BorderSide(
                              color: Colors.black,
                              width: 2
                          )
                      ),
                    ),

                    margin: const EdgeInsets.symmetric(
                        horizontal: 4
                    ),

                    child: Container(
                      child: Stack(
                        children: [
                          Container(
                            width: 40,
                            height: 40,
                            child: Icon(
                              Icons.arrow_downward,
                              color: Colors.black,
                            ),
                          ),
                          Positioned.fill(
                            child: ElevatedButton(
                              onPressed: () {
                                _currentIndex = wrap(_currentIndex + 4, 0, announcements.length);
                                setState(() {});
                                print(_currentIndex);
                              },
                              style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.transparent,
                                shadowColor: Colors.transparent,
                                surfaceTintColor: Colors.transparent,
                                foregroundColor: Colors.transparent,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(0),
                                ),
                              ),
                              child: const Text(""),
                            ),
                          )
                        ],
                      ),
                    )

                ),

              ]

            ),

          ),
          Container(
            height: 2,
            color: Colors.black,
          ),

        ]
      ),
    );


  }
}

int wrap(int i, int j, int length) {
  return ((i - j) % length + length) % length;
}

class _QuickAnnouncement_IBUS extends StatelessWidget {

  final ManualAnnouncementEntry announcement;
  final int index;

  const _QuickAnnouncement_IBUS({super.key, required this.announcement, required this.index});

  @override
  Widget build(BuildContext context) {

    return Stack(
      children: [
        Container(

          decoration: BoxDecoration(
            color: Colors.lightGreen.shade100,
            border: const Border.symmetric(
              vertical: BorderSide(
               color: Colors.black,
                width: 2
              )
            ),
          ),

          padding: const EdgeInsets.all(5),

          width: double.infinity,
          height: 50,

          child: Row(
            children: [
              Text(
                announcement.shortName,
                style: const TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                  fontFamily: "lcd",
                  height: 1,
                ),
              ),
              Expanded(
                child: Container(

                  alignment: Alignment.centerRight,

                  child: Text(
                    (index+1).toString(),
                    style: const TextStyle(
                      fontSize: 20,
                      color: Colors.black,
                      fontFamily: "lcd",
                      height: 1,
                    ),
                  ),
                ),
              )
            ],
          )

        ),

        Positioned.fill(
          child: ElevatedButton(
            onPressed: () {
              LiveInformation liveInformation = LiveInformation();
              liveInformation.queueAnnouncement(announcement);
            },
          
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.transparent,
              shadowColor: Colors.transparent,
              surfaceTintColor: Colors.transparent,
              foregroundColor: Colors.transparent,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(0),
              ),
            ),
          
            child: const Text("More"),
          ),
        )
      ],
    );

  }
}

class QuickAnnouncement extends StatelessWidget {

  List<Widget> announcementButtons = [];

  QuickAnnouncement({super.key}){

    LiveInformation liveInformation = LiveInformation();

    for (ManualAnnouncementEntry entry in liveInformation.manualAnnouncements) {
      announcementButtons.add(
        _QuickAnnouncement_Entry(manualAnnouncementEntry: entry)
      );
    }

  }

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {

    List<Widget> UsingAnnouncements = [];

    for (int i = 0; i < 4; i++) {

      Widget widget = announcementButtons[wrap(_currentIndex + i, 0, announcementButtons.length)];

      UsingAnnouncements.add(widget);
      UsingAnnouncements.add(
        SizedBox(
          height: 10,
        )
      );
    }


    // TODO: implement build
    return Container(
      
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        color: Colors.grey.shade900,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.3),
            blurRadius: 4,
            spreadRadius: 4
          )
        ]
      ),

      padding: EdgeInsets.all(10),
      
      child: Column(

        crossAxisAlignment: CrossAxisAlignment.start,

        children: [

          Row(
            children: [
              Container(

                decoration: BoxDecoration(
                  color: Colors.grey.shade800,
                  borderRadius: BorderRadius.circular(5),
                ),

                padding: EdgeInsets.all(8),

                child: Text(
                  "Quick Announcements",
                  style: GoogleFonts.montserrat(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    height: 1
                  ),
                ),
              ),

              // Container

              ElevatedButton(
                onPressed: () {
                  _currentIndex = wrap(_currentIndex + 4, 0, announcementButtons.length);
                  // setState(() {});
                },
                child: const Icon(
                  Icons.arrow_back,
                  color: Colors.white,
                )
              ),

              ElevatedButton(
                onPressed: () {
                  _currentIndex = wrap(_currentIndex + 4, 0, announcementButtons.length);
                  // setState(() {});
                },
                child: const Icon(
                  Icons.arrow_forward,
                  color: Colors.white,
                )
              )

            ],
          ),

          Container(
            margin: EdgeInsets.symmetric(vertical: 10),
            height: 1,
            color: Colors.grey.shade600,
          ),

          ...UsingAnnouncements,

        ],

      )
    );
  }

}

class _QuickAnnouncement_Entry extends StatelessWidget {

  final ManualAnnouncementEntry manualAnnouncementEntry;

  const _QuickAnnouncement_Entry({super.key, required this.manualAnnouncementEntry});



  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(

      decoration: BoxDecoration(
        color: Colors.grey.shade800,
        borderRadius: BorderRadius.circular(5),
      ),

      padding: EdgeInsets.all(8),

      width: double.infinity,

      child: Text(
        manualAnnouncementEntry.shortName,
        style: GoogleFonts.montserrat(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.white
        ),
      ),

    );
  }

}