import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:mohem_flutter_app/app_state/app_state.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/decorations_helper.dart';
import 'package:mohem_flutter_app/config/routes.dart';
import 'package:mohem_flutter_app/extensions/int_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_intro_screen.dart';
import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/countdown_timer.dart';
import 'package:provider/provider.dart';
import 'dart:math' as math;

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

  @override
  Widget build(BuildContext context) {
    MarathonProvider provider = context.read<MarathonProvider>();
    return Container(
      decoration: MyDecorations.shadowDecoration,
      child: Stack(
        children: [
          Transform(
            alignment: Alignment.center,
            transform: Matrix4.rotationY(
              AppState().isArabic(context) ? math.pi : 0,
            ),
            child: SvgPicture.asset(
              "assets/images/marathon_banner_bg.svg",
              fit: BoxFit.cover,
              width: MediaQuery.of(context).size.width - 40,
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  AppState().isArabic(context) ? 0.height : 5.height,
                  Flexible(
                    child: Text(
                      LocaleKeys.getReadyForContest.tr(),
                      style: const TextStyle(
                        fontStyle: FontStyle.italic,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                        color: MyColors.lightGreyEFColor,
                        letterSpacing: -0.4,
                      ),
                    ),
                  ),
                  const Flexible(
                    child: Text(
                      "Saudi Arabia",
                      style: TextStyle(
                        fontStyle: FontStyle.italic,
                        fontSize: 19,
                        fontWeight: FontWeight.bold,
                        color: MyColors.lightGreyEFColor,
                        height: 32 / 22,
                      ),
                    ),
                  ),
                  3.height,
                  BuildCountdownTimer(
                    timeToMarathon: dummyEndTime,
                    provider: provider,
                    screenFlag: 0,
                  ),
                ],
              ).paddingOnly(
                left: AppState().isArabic(context) ? 12 : 0,
                right: AppState().isArabic(context) ? 0 : 12,
              )
            ],
          ),
        ],
      ).onPress(
        () => Navigator.pushNamed(context, AppRoutes.marathonIntroScreen),
      ),
    );
  }
}