import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:marquee/marquee.dart';
import 'package:provider/provider.dart';
import 'package:queuing_system/core/base/app_scaffold_widget.dart';
import 'package:queuing_system/core/config/config.dart';
import 'package:queuing_system/core/config/size_config.dart';
import 'package:queuing_system/header/app_header.dart';
import 'package:queuing_system/home/app_provider.dart';
import 'package:queuing_system/home/priority_calls_components.dart';
import 'package:queuing_system/utils/utils.dart';
import 'package:queuing_system/widget/data_display/app_texts_widget.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  getWeatherWidget() {
    return Consumer(builder: (BuildContext context, AppProvider appProvider, Widget? child) {
      if (appProvider.currentWeathersWidgetModel.maxTemp == null || appProvider.currentWeathersWidgetModel.minTemp == null || appProvider.currentWeathersWidgetModel.iconPhrase == null) {
        return const SizedBox.shrink();
      }
      return Container(
        constraints: BoxConstraints(
          minWidth: SizeConfig.getWidthMultiplier() * 30,
          minHeight: SizeConfig.getHeightMultiplier() * 5.5,
        ),
        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        decoration: AppGlobal.configWidgetDecoration,
        child: Directionality(
          textDirection: appProvider.patientCallConfigurations.textDirection,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  AppText(
                    appProvider.patientCallConfigurations.weatherText,
                    color: Colors.grey,
                    fontSize: SizeConfig.getWidthMultiplier() * 1.5,
                  ),
                  AppText(
                    // "Max: 40C , Min: 38C",
                    "${appProvider.patientCallConfigurations.maxText}: ${appProvider.currentWeathersWidgetModel.maxTemp}°C , ${appProvider.patientCallConfigurations.minText}: ${appProvider.currentWeathersWidgetModel.minTemp}°C",
                    fontSize: SizeConfig.getHeightMultiplier() * 1.3,
                    fontHeight: 1,
                  ),
                ],
              ),
              const SizedBox(width: 15),
              SvgPicture.asset(
                appProvider.currentWeathersWidgetModel.weatherIconPath ?? AppGlobal.weatherIcon,
                height: SizeConfig.getHeightMultiplier() * 3,
              ),
            ],
          ),
        ),
      );
    });
  }

  getPrayerWidget() {
    return Consumer(builder: (BuildContext context, AppProvider appProvider, Widget? child) {
      if (appProvider.nextPrayerToShowWithTime.isEmpty) {
        return const SizedBox.shrink();
      }
      return Container(
        constraints: BoxConstraints(
          minWidth: SizeConfig.getWidthMultiplier() * 25,
          minHeight: SizeConfig.getHeightMultiplier() * 5,
        ),
        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        decoration: AppGlobal.configWidgetDecoration,
        child: Directionality(
          textDirection: appProvider.patientCallConfigurations.textDirection,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  AppText(
                    appProvider.patientCallConfigurations.nextPrayerText,
                    color: Colors.grey,
                    fontSize: SizeConfig.getWidthMultiplier() * 1.5,
                  ),
                  AppText(
                    appProvider.nextPrayerToShowWithTime,
                    fontSize: SizeConfig.getHeightMultiplier() * 1.3,
                    fontHeight: 1,
                  ),
                ],
              ),
              const SizedBox(width: 15),
              SvgPicture.asset(
                AppGlobal.mosqueIcon,
                height: SizeConfig.getHeightMultiplier() * 3,
              ),
            ],
          ),
        ),
      );
    });
  }

  getBody(AppProvider appProvider) {
    return Column(
      children: [
        const SizedBox(height: 12),
        Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: Row(
                children: [
                  getWeatherWidget(),
                  const SizedBox(width: 35),
                  getPrayerWidget(),
                ],
              ),
            )),
        const SizedBox(height: 20),
        Expanded(
          flex: 9,
          child: dataContent(appProvider: appProvider),
        ),
      ],
    );
  }

  Widget getRSSFeedWidget() {
    return Container(
      // height: 35,
      // decoration: const BoxDecoration(
      //   color: Color(0x3A1E2326),
      // ),
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Marquee(
        text: 'Nullam porta dui nec lectus rhoncus sagittis. Cras vitae elit quam. Donec pretium tortor urna, sed fermentum dolor scelerisque vel. Vivamus pretium ut leo eget fermentum.',
        style: TextStyle(fontWeight: FontWeight.w500, fontSize: SizeConfig.getHeightMultiplier() * 2),
        scrollAxis: Axis.horizontal,
        crossAxisAlignment: CrossAxisAlignment.center,
        blankSpace: 20.0,
        velocity: 100.0,
        pauseAfterRound: const Duration(seconds: 1),
        startPadding: 10.0,
        accelerationDuration: const Duration(seconds: 1),
        accelerationCurve: Curves.linear,
        decelerationDuration: const Duration(milliseconds: 500),
        decelerationCurve: Curves.easeOut,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final appProvider = context.watch<AppProvider>();

    return AppScaffold(
      appProvider: appProvider,
      appBar: const AppHeader(),
      body: getBody(appProvider),
      bottomNavigationBar: Container(
          color: Colors.grey.withOpacity(0.1),
          height: Utils.getHeight() * 0.8,
          width: double.infinity,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  const SizedBox(width: 20),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      InkWell(
                        onTap: () async {
                          await context.read<AppProvider>().callPatientsAPI();
                        },
                        child: AppText(
                          "Powered By",
                          fontSize: SizeConfig.getWidthMultiplier() * 2.6,
                          fontFamily: 'Poppins-Medium.ttf',
                        ),
                      ),
                      Text(appProvider.currentDeviceIp, style: TextStyle(fontWeight: FontWeight.w500, fontSize: SizeConfig.getWidthMultiplier() * 2.2)),
                    ],
                  ),
                  const SizedBox(width: 10),
                  Image.asset(
                    "assets/images/cloud_logo.png",
                    height: SizeConfig.getHeightMultiplier() * 4,
                  ),
                ],
              ),
              Expanded(child: getRSSFeedWidget())
            ],
          )),
    );
  }

  Widget dataContent({required AppProvider appProvider}) {
    // if (true) {
    //   return qamarsBirthdayWidget();
    // }
    if (appProvider.patientTickets.isEmpty) {
      // No Patient in Queue
      return noPatientInQueue();
    } else if (appProvider.patientTickets.length > 3) {
      // Return Content With Side List
      return priorityTicketsWithSideList(tickets: appProvider.patientTickets, callConfig: appProvider.patientCallConfigurations);
    } else {
      // Return Content In Center Aligned
      return PriorityTickets(tickets: appProvider.patientTickets, callConfig: appProvider.patientCallConfigurations);
    }
  }
}