import 'package:easy_localization/src/public_ext.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.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:shimmer/shimmer.dart';

class GetAttendanceTrackingShimmer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff000000).withOpacity(.05),
            blurRadius: 26,
            offset: const Offset(0, -3),
          ),
        ],
      ),
      child: Stack(
        alignment: Alignment.center,
        children: [
          // SvgPicture.asset("assets/images/"),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    LocaleKeys.markAttendance.tr().toText14(color: Colors.white, isBold: true).toShimmer(),
                    16.height,
                    "07:55:12".toText10(color: Colors.white, isBold: true).toShimmer(),
                    3.height,
                    LocaleKeys.timeLeftToday.tr().toText10(color: Colors.white).toShimmer(),
                    9.height,
                    const ClipRRect(
                      borderRadius: BorderRadius.all(
                        Radius.circular(20),
                      ),
                      child: LinearProgressIndicator(
                        value: 0.7,
                        minHeight: 8,
                        valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
                        backgroundColor: const Color(0xff196D73),
                      ),
                    ).toShimmer(),
                  ],
                ).paddingOnly(top: 12, right: 15, left: 12),
              ),
              Row(
                children: [
                  Expanded(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        LocaleKeys.checkIn.tr().toText12(color: Colors.white).toShimmer(),
                      ],
                    ).paddingOnly(left: 12),
                  ),
                  Container(
                    width: 45,
                    height: 45,
                    // color: Colors.blue,
                    padding: const EdgeInsets.only(left: 14, right: 14),
                  ).toShimmer(),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class MenuShimmer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff000000).withOpacity(.05),
            blurRadius: 26,
            offset: const Offset(0, -3),
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          LocaleKeys.workList.tr().toText12(color: Colors.white).toShimmer(),
          Row(
            children: [
              Expanded(
                flex: 3,
                child: 123.toString().toText10(color: Colors.white, isBold: true).toShimmer(),
              ),
              12.width,
              SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white).toShimmer()
            ],
          )
        ],
      ).paddingOnly(left: 10, right: 10, bottom: 6, top: 6),
    );
  }
}

class ServicesHeaderShimmer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              "Other".tr().toText10().toShimmer(),
              6.height,
              LocaleKeys.services.tr().toText12(isBold: true).toShimmer(),
            ],
          ),
        ),
        LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true).toShimmer(),
      ],
    );
  }
}

class ServicesMenuShimmer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff000000).withOpacity(.05),
            blurRadius: 26,
            offset: const Offset(0, -3),
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SvgPicture.asset("assets/images/monthly_attendance.svg").toShimmer(),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              "Attendan".toText11(isBold: false).toShimmer(),
              5.height,
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Expanded(
                    child: LocaleKeys.attendance.tr().toText11(isBold: false).toShimmer(),
                  ),
                  6.width,
                  SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4).toShimmer()
                ],
              ),
            ],
          )
        ],
      ).paddingOnly(left: 10, right: 10, bottom: 10, top: 12),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff000000).withOpacity(.05),
            blurRadius: 26,
            offset: const Offset(0, -3),
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SvgPicture.asset("assets/images/monthly_attendance.svg").toShimmer(),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              "Attendan".toText11(isBold: false).toShimmer(),
              5.height,
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Expanded(
                    child: LocaleKeys.attendance.tr().toText11(isBold: false).toShimmer(),
                  ),
                  6.width,
                  SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4).toShimmer()
                ],
              ),
            ],
          )
        ],
      ).paddingOnly(left: 10, right: 10, bottom: 10, top: 12),
    );
  }
}

class ChatHomeShimmer extends StatelessWidget {
  bool isDetailedScreen;

  ChatHomeShimmer({Key? key, required this.isDetailedScreen}) : super(key: key);

  @override
  @override
  Widget build(BuildContext context) {
    return Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Expanded(
              child: Shimmer.fromColors(
                baseColor: Colors.white,
                highlightColor: Colors.grey.shade100,
                child: ListView.builder(
                  itemBuilder: (_, __) => Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        if (!isDetailedScreen)
                          Container(
                            width: 48.0,
                            height: 48.0,
                            decoration: const BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(40))),
                          ),
                        if (!isDetailedScreen)
                          const Padding(
                            padding: EdgeInsets.symmetric(horizontal: 8.0),
                          ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              width: double.infinity,
                              height: 8.0,
                              color: Colors.white,
                            ),
                            const Padding(
                              padding: EdgeInsets.symmetric(vertical: 2.0),
                            ),
                            Container(
                              width: double.infinity,
                              height: 8.0,
                              color: Colors.white,
                            ),
                            const Padding(
                              padding: EdgeInsets.symmetric(vertical: 2.0),
                            ),
                            Container(
                              width: 40.0,
                              height: 8.0,
                              color: Colors.white,
                            ),
                          ],
                        ).expanded
                      ],
                    ),
                  ),
                  itemCount: 6,
                ),
              ),
            ),
          ],
        ));
  }
}