import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/decorations_helper.dart';
import 'package:mohem_flutter_app/classes/lottie_consts.dart';
import 'package:mohem_flutter_app/config/routes.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/countdown_timer.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_header.dart';
import 'package:mohem_flutter_app/widgets/button/default_button.dart';
import 'package:provider/provider.dart';

final int dummyEndTime = DateTime.now().millisecondsSinceEpoch + 1000 * 30;

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

  @override
  Widget build(BuildContext context) {
    MarathonProvider provider = context.watch<MarathonProvider>();
    return Scaffold(
      body: Stack(
        children: <Widget>[
          SingleChildScrollView(
            child: Column(
              children: <Widget>[
                const MarathonHeader(),
                MarathonDetailsCard(provider: provider).paddingAll(15),
                MarathonTimerCard(
                  provider: provider,
                  timeToMarathon: dummyEndTime,
                ).paddingOnly(left: 15, right: 15, bottom: 15),
                const SizedBox(height: 100,),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: MarathonFooter(provider: provider),
          ),
        ],
      ),
    );
  }
}

class MarathonDetailsCard extends StatelessWidget {
  final MarathonProvider provider;

  const MarathonDetailsCard({Key? key, required this.provider})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              LocaleKeys.contestTopicAbout
                  .tr()
                  .toText16(color: MyColors.grey77Color),
              "Saudi Arabia"
                  .toText20(color: MyColors.textMixColor, isBold: true),
              Row(
                children: <Widget>[
                  Flexible(
                    child:
                        "Nam suscipit turpis in pharetra euismsdef. Duis rutrum at nulla id aliquam"
                            .toText14(color: MyColors.grey77Color),
                  )
                ],
              ),
              if (provider.itsMarathonTime) ...<Widget>[
                5.height,
                Row(
                  children: <Widget>[
                    LocaleKeys.prize
                        .tr()
                        .toText16(color: MyColors.grey77Color, isBold: true),
                    " LED 55\" Android TV"
                        .toText16(color: MyColors.greenColor, isBold: true),
                  ],
                ),
                Row(
                  children: <Widget>[
                    LocaleKeys.sponsoredBy
                        .tr()
                        .toText16(color: MyColors.grey77Color),
                    " Extra"
                        .toText16(color: MyColors.darkTextColor, isBold: true),
                  ],
                ),
                10.height,
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.network(
                      "https://cdn.pixabay.com/photo/2014/08/27/07/53/blog-428950_1280.jpg",
                      height: 50,
                      fit: BoxFit.fill,
                      width: 120,
                    )
                  ],
                ),
              ]
            ],
          ),
        ],
      ),
    );
  }
}

class MarathonTimerCard extends StatelessWidget {
  final int timeToMarathon;
  final MarathonProvider provider;

  const MarathonTimerCard({
    Key? key,
    required this.provider,
    required this.timeToMarathon,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              LocaleKeys.gameDate.tr().toText16(color: MyColors.grey77Color),
              " 10 Oct, 2022"
                  .toText16(color: MyColors.darkTextColor, isBold: true),
            ],
          ),
          Row(
            children: <Widget>[
              LocaleKeys.gameTime.tr().toText16(color: MyColors.grey77Color),
              " 3:00pm".toText16(color: MyColors.darkTextColor, isBold: true),
            ],
          ),
          Lottie.asset(
            MyLottieConsts.hourGlassLottie,
            height: 140,
          ),
          BuildCountdownTimer(
            timeToMarathon: timeToMarathon,
            provider: provider,
            screenFlag: 1,
          ),
        ],
      ),
    );
  }
}

class MarathonFooter extends StatelessWidget {
  final MarathonProvider provider;

  const MarathonFooter({
    Key? key,
    required this.provider,
  }) : super(key: key);

  Widget buildNoteForDemo() {
    return Flexible(
      child: RichText(
        text: TextSpan(
          children: <InlineSpan>[
            TextSpan(
              text: LocaleKeys.note.tr(),
              style: const TextStyle(
                color: MyColors.darkTextColor,
                fontSize: 17,
                letterSpacing: -0.64,
                fontWeight: FontWeight.bold,
              ),
            ),
            TextSpan(
              text: " " + LocaleKeys.demoMarathonNoteP1.tr(),
              style: const TextStyle(
                color: MyColors.grey77Color,
                fontSize: 17,
                letterSpacing: -0.64,
                fontWeight: FontWeight.w500,
              ),
            ),
            TextSpan(
              text: " " + LocaleKeys.demoMarathonNoteP2.tr(),
              style: const TextStyle(
                color: MyColors.darkTextColor,
                fontSize: 17,
                fontWeight: FontWeight.bold,
              ),
            ),
            TextSpan(
              text: " " + LocaleKeys.demoMarathonNoteP3.tr(),
              style: const TextStyle(
                color: MyColors.grey77Color,
                fontSize: 17,
                letterSpacing: -0.64,
                fontWeight: FontWeight.w500,
              ),
            )
          ],
        ),
      ),
    ).paddingOnly(right: 21, left: 21, top: 11, bottom: 0);
  }

  @override
  Widget build(BuildContext context) {
    return provider.itsMarathonTime
        ? DefaultButton(
            LocaleKeys.joinMarathon.tr(),
            () => Navigator.pushNamed(context, AppRoutes.marathonScreen),
          ).insideContainer
        : Container(
            color: Colors.white,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                buildNoteForDemo(),
                DefaultButton(
                  LocaleKeys.joinDemoMarathon.tr(),
                  () {},
                  color: MyColors.yellowColorII,
                ).insideContainer,
              ],
            ),
          );
  }
}