import 'package:flutter/material.dart';
import 'package:flutter_image_slideshow/flutter_image_slideshow.dart';
import 'package:text_scroll/text_scroll.dart';

import '../app/constant.dart';
import '../model/display_counter_dedicated_modelv2.dart';
import '../model/service_model.dart';
import '../widget/clock.dart';
import '../widget/my_antrian_customer_service_dedicated.dart';
import '../widget/my_counter_customer_service_dedicated.dart';

class WithMediaPromo extends StatelessWidget {
  const WithMediaPromo({
    Key? key,
    required this.listBelumDilayani,
    required this.isLoading,
    required this.judul,
    required this.scrlCnt,
    required this.selectedCounter,
    required this.listCall,
    required this.listSedangDilayani,
  }) : super(key: key);

  final ValueNotifier<List<NotServed>> listBelumDilayani;
  final ValueNotifier<bool> isLoading;
  final ValueNotifier<String> judul;
  final ScrollController scrlCnt;
  final ValueNotifier<List<Layanan>> selectedCounter;
  final ValueNotifier<List<Call>> listCall;
  final ValueNotifier<List<Served>> listSedangDilayani;

  @override
  Widget build(BuildContext context) {
    getNomorAntrian(String counterID) {
      var rawCall = listCall.value;
      // print(rawCall);
      Call call = Call(
          queueID: '0',
          statusID: '0',
          queueNumber: '0',
          queueCounterID: '0',
          counterCode: '0',
          orderStatus: '0');
      for (var i = 0; i < rawCall.length; i++) {
        if (rawCall[i].queueCounterID == counterID) {
          call = rawCall[i];
        }
      }

      var rawProcess = listSedangDilayani.value;
      Served process = Served(
          queueID: '0',
          statusID: '0',
          queueNumber: '0',
          queueCounterID: '0',
          counterCode: '0',
          orderStatus: '0');

      for (var i = 0; i < rawProcess.length; i++) {
        if (rawProcess[i].queueCounterID == counterID) {
          process = rawProcess[i];
        }
      }
      if (call.queueID != '0' && process.queueID == '0') {
        return call.queueNumber;
      } else if (call.queueID == '0' && process.queueID != '0') {
        return process.queueNumber;
      } else if (call.queueID == '0' && process.queueID == '0') {
        return '-';
      } else {
        return call.queueNumber;
      }
    }

    getBlinkAntrian(String counterID) {
      var rawCall = listCall.value;
      // print(rawCall);
      Call call = Call(
          queueID: '0',
          statusID: '0',
          queueNumber: '0',
          queueCounterID: '0',
          counterCode: '0',
          orderStatus: '0');
      for (var i = 0; i < rawCall.length; i++) {
        if (rawCall[i].queueCounterID == counterID) {
          call = rawCall[i];
        }
      }

      var rawProcess = listSedangDilayani.value;
      Served process = Served(
          queueID: '0',
          statusID: '0',
          queueNumber: '0',
          queueCounterID: '0',
          counterCode: '0',
          orderStatus: '0');

      for (var i = 0; i < rawProcess.length; i++) {
        if (rawProcess[i].queueCounterID == counterID) {
          process = rawProcess[i];
        }
      }
      if (call.queueID != '0' && process.queueID == '0') {
        return true;
      } else if (call.queueID == '0' && process.queueID != '0') {
        return false;
      } else if (call.queueID == '0' && process.queueID == '0') {
        return false;
      } else {
        return true;
      }
    }

    return Material(
      child: Container(
        width: Constant.getActualX(context: context, x: 1920),
        height: Constant.getActualY(context: context, y: 1080),
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage('images/background.png'), fit: BoxFit.fill)),
        child: Padding(
          padding: EdgeInsets.only(
              left: Constant.getActualX(context: context, x: 68),
              right: Constant.getActualX(context: context, x: 68),
              top: Constant.getActualY(context: context, y: 34),
              bottom: Constant.getActualY(context: context, y: 32)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Column(
                // mainAxisAlignment: MainAxisAlignment.end,
                // crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  //TV
                  SizedBox(
                    width: Constant.getActualX(context: context, x: 882),
                    height: Constant.getActualY(context: context, y: 508),
                    child: ImageSlideshow(
                      indicatorColor: Colors.transparent,
                      indicatorBackgroundColor: Colors.transparent,
                      autoPlayInterval: 5000,
                      isLoop: true,
                      children: [
                        // Container(
                        //   child:
                        // ),

                        Image.network(
                          'https://${Constant.baseSocket}/one-media/one-queue/slide-counter/1.jpg',
                          errorBuilder: (context, error, stackTrace) {
                            return Image.asset(
                              'images/1.jpg',
                              fit: BoxFit.fitWidth,
                            );
                          },
                          headers: {
                            'Access-Control-Allow-Origin': '*',
                          },
                          loadingBuilder: (context, child, loadingProgress) {
                            if (loadingProgress == null) {
                              return child;
                            } else {
                              return Center(
                                child: CircularProgressIndicator(),
                              );
                            }
                          },
                        ),
                        Image.network(
                          'https://${Constant.baseSocket}/one-media/one-queue/slide-counter/2.jpg',
                          errorBuilder: (context, error, stackTrace) {
                            return Image.asset(
                              'images/2.jpg',
                              fit: BoxFit.fitWidth,
                            );
                          },
                          headers: {
                            'Access-Control-Allow-Origin': '*',
                          },
                          loadingBuilder: (context, child, loadingProgress) {
                            if (loadingProgress == null) {
                              return child;
                            } else {
                              return Center(
                                child: CircularProgressIndicator(),
                              );
                            }
                          },
                        ),
                        Image.network(
                          'https://${Constant.baseSocket}/one-media/one-queue/slide-counter/3.jpg',
                          errorBuilder: (context, error, stackTrace) {
                            return Image.asset(
                              'images/3.jpg',
                              fit: BoxFit.fitWidth,
                            );
                          },
                          headers: {
                            'Access-Control-Allow-Origin': '*',
                          },
                          loadingBuilder: (context, child, loadingProgress) {
                            if (loadingProgress == null) {
                              return child;
                            } else {
                              return Center(
                                child: CircularProgressIndicator(),
                              );
                            }
                          },
                        ),
                        Image.network(
                          'https://${Constant.baseSocket}/one-media/one-queue/slide-counter/4.jpg',
                          errorBuilder: (context, error, stackTrace) {
                            return Image.asset(
                              'images/4.jpg',
                              fit: BoxFit.fitWidth,
                            );
                          },
                          headers: {
                            'Access-Control-Allow-Origin': '*',
                          },
                          loadingBuilder: (context, child, loadingProgress) {
                            if (loadingProgress == null) {
                              return child;
                            } else {
                              return Center(
                                child: CircularProgressIndicator(),
                              );
                            }
                          },
                        ),
                        Image.network(
                          'https://${Constant.baseSocket}/one-media/one-queue/slide-counter/5.jpg',
                          errorBuilder: (context, error, stackTrace) {
                            return Image.asset(
                              'images/5.jpg',
                              fit: BoxFit.fitWidth,
                            );
                          },
                          headers: {
                            'Access-Control-Allow-Origin': '*',
                          },
                          loadingBuilder: (context, child, loadingProgress) {
                            if (loadingProgress == null) {
                              return child;
                            } else {
                              return Center(
                                child: CircularProgressIndicator(),
                              );
                            }
                          },
                        ),
                        Image.network(
                          'https://${Constant.baseSocket}/one-media/one-queue/slide-counter/6.jpg',
                          errorBuilder: (context, error, stackTrace) {
                            return Image.asset(
                              'images/6.jpg',
                              fit: BoxFit.fitWidth,
                            );
                          },
                          headers: {
                            'Access-Control-Allow-Origin': '*',
                          },
                          loadingBuilder: (context, child, loadingProgress) {
                            if (loadingProgress == null) {
                              return child;
                            } else {
                              return Center(
                                child: CircularProgressIndicator(),
                              );
                            }
                          },
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: Constant.getActualY(context: context, y: 10),
                  ),

                  // waktu yg direvisi
                  Clock(),

                  //Antrian Selanjutnya
                  SizedBox(
                    width: Constant.getActualX(context: context, x: 882),
                    height: Constant.getActualY(context: context, y: 66),
                    child: Text('Antrian Selanjutnya',
                        style: Constant.S50(context: context)
                            .copyWith(color: Constant.textBlack)),
                  ),
                  SizedBox(
                    height: Constant.getActualY(context: context, y: 24),
                  ),

                  SizedBox(
                    width: Constant.getActualX(context: context, x: 882),
                    height: Constant.getActualY(context: context, y: 300),
                    child: GridView.count(
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 0,
                      crossAxisCount: 2,
                      childAspectRatio: 4,
                      children: listBelumDilayani.value
                          .map(
                            (e) => GestureDetector(
                              onTap: () {
                                // process_sound(
                                //     e['waiting'].queueNumber, "r117");
                              },
                              child: MyAntrianCustomerServiceDedicated(
                                skip: e.skipQueue,
                                antrian: e.queueNumber,
                              ),
                            ),
                          )
                          .toList(),
                    ),
                  ),
                ],
              ),
              // const Spacer(),
              SizedBox(
                width: Constant.getActualX(context: context, x: 40),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      SizedBox(
                        width: Constant.getActualX(context: context, x: 808),
                        height: Constant.getActualY(context: context, y: 160),
                        child: Stack(
                          alignment: Alignment.centerLeft,
                          children: [
                            Container(
                              width:
                                  Constant.getActualX(context: context, x: 808),
                              height:
                                  Constant.getActualY(context: context, y: 72),
                              decoration: BoxDecoration(
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black.withOpacity(0.25),
                                        blurRadius: 8)
                                  ],
                                  borderRadius: BorderRadius.circular(20),
                                  color: Colors.white),
                              child: Padding(
                                padding: EdgeInsets.only(
                                  top: 6,
                                  left: Constant.getActualX(
                                      context: context, x: 120),
                                ),
                                child: Stack(
                                  alignment: Alignment.centerLeft,
                                  children: [
                                    if (isLoading.value)
                                      SizedBox(
                                        width: Constant.getActualX(
                                            context: context, x: 60),
                                        height: Constant.getActualX(
                                            context: context, x: 70),
                                        child:
                                            const CircularProgressIndicator(),
                                      ),
                                    TextScroll(judul.value,
                                        velocity: Velocity(
                                            pixelsPerSecond: Offset(50, 0)),
                                        style: Constant.body_3(context: context)
                                            .copyWith(color: Constant.textRed)),
                                  ],
                                ),
                              ),
                            ),
                            Container(
                              width:
                                  Constant.getActualX(context: context, x: 100),
                              height:
                                  Constant.getActualY(context: context, y: 100),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(20),
                                  gradient: LinearGradient(
                                      colors: [Constant.red1, Constant.red2])),
                            ),
                            Positioned(
                              top: 0,
                              child: Image.asset(
                                'images/cs.png',
                                fit: BoxFit.cover,
                                height: 100,
                              ),
                            )
                          ],
                        ),
                      ),
                      SizedBox(
                        width: Constant.getActualX(context: context, x: 20),
                      ),
                    ],
                  ),
                  SizedBox(
                    width: Constant.getActualX(context: context, x: 808),
                    height: Constant.getActualY(context: context, y: 820),
                    child: GridView.count(
                        scrollDirection: Axis.horizontal,
                        controller: scrlCnt,
                        crossAxisSpacing: 90,
                        mainAxisSpacing: 60,
                        crossAxisCount: 2,
                        children: selectedCounter.value
                            .map(
                              (e) => MyCounterCustomerServiceDedicated(
                                // counter: 'DOKTER UMUM',
                                counter: 'Counter ${e.counterCode}',
                                nomorAntrian:
                                    getNomorAntrian(e.counterID.toString()),
                                // nomorAntrian: 'LA 001',
                                borderDalam: const BorderRadius.only(
                                    topLeft: Radius.circular(50),
                                    topRight: Radius.circular(50),
                                    bottomLeft: Radius.circular(50)),
                                borderLuar: const BorderRadius.only(
                                  topLeft: Radius.circular(60),
                                  topRight: Radius.circular(60),
                                  bottomLeft: Radius.circular(60),
                                ),
                                blink: getBlinkAntrian(e.counterID.toString()),
                              ),
                            )
                            .toList()),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}