import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:manager_api/api.dart';
import 'package:mymuseum_visitapp/Components/Loading.dart';
import 'package:mymuseum_visitapp/Helpers/DatabaseHelper.dart';
import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
import 'package:mymuseum_visitapp/Models/articleRead.dart';
import 'package:mymuseum_visitapp/Models/visitContext.dart';
import 'package:mymuseum_visitapp/Services/apiService.dart';
import 'package:mymuseum_visitapp/app_context.dart';
import 'package:mymuseum_visitapp/constants.dart';
import 'package:provider/provider.dart';

class SectionCard extends StatelessWidget {
  const SectionCard({
    Key? key,
    required this.itemIndex,
    required this.itemCount,
    required this.sectionDTO,
    required this.press,
  }) : super(key: key);

  final int itemIndex;
  final int itemCount;
  final SectionDTO sectionDTO;
  final void Function()? press;

  @override
  Widget build(BuildContext context) {
    // It  will provide us total height and width of our screen
    Size size = MediaQuery.of(context).size;
    final appContext = Provider.of<AppContext>(context);
    VisitAppContext visitAppContext = appContext.getContext();
    bool isOffline = (appContext.getContext() as VisitAppContext).configuration!.isOffline!;

    return Container(
      margin: EdgeInsets.only(
        left: kDefaultPadding,
        right: kDefaultPadding,
        bottom: itemIndex+1 == itemCount ? kDefaultPadding : 0
      ),
      height: 160,
      decoration: const BoxDecoration(
        boxShadow: [kDefaultShadow],
      ),
      child: InkWell(
        onTap: press,
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: <Widget>[
            // Those are our background
            Container(
              height: 136,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(22),
                color: itemIndex.isEven ? kBlue0 : kBlue1,
              ),
              child: Container(
                margin: const EdgeInsets.only(right: 10),
                decoration: BoxDecoration(
                  color: visitAppContext.readArticles.any((element) => element.id == sectionDTO.id) ? kBackgroundGrey : Colors.white,
                  border: Border.all(
                    color: kBlue2,
                    width: 0.2,
                  ),
                  borderRadius: BorderRadius.circular(22),
                ),
              ),
            ),
            if(sectionDTO.imageId != null)
              // section main image
              Positioned(
                top: kDefaultPadding +4.0,
                right: -10,
                child: /*Hero(
                  tag: '${sectionDTO.id}',
                  child:*/ Container(
                    padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
                    height: 136,
                    // image is square but we add extra 20 + 20 padding thats why width is 200
                    width: size.width*0.5,
                    child: FutureBuilder(
                      future: ApiService.getResource(appContext, sectionDTO.imageId!),
                      builder: (context, AsyncSnapshot<dynamic> snapshot) {
                        if (snapshot.connectionState == ConnectionState.done) {
                          return snapshot.data != null ? ClipRRect(
                            borderRadius: const BorderRadius.only(topRight: Radius.circular(20), bottomRight: Radius.circular(20)),
                            child: isOffline ?
                            Image.memory(
                                base64Decode(snapshot.data!.data!),
                                fit: BoxFit.cover
                            ) :
                            Image.network(
                                sectionDTO.imageSource!,
                                fit: BoxFit.cover,
                                loadingBuilder: (BuildContext context, Widget child,
                                    ImageChunkEvent? loadingProgress) {
                                  if (loadingProgress == null) {
                                    return child;
                                  }
                                  return Center(
                                    child: CircularProgressIndicator(
                                      color: kBlue1,
                                      value: loadingProgress.expectedTotalBytes != null
                                          ? loadingProgress.cumulativeBytesLoaded /
                                          loadingProgress.expectedTotalBytes!
                                          : null,
                                    ),
                                  );
                                },
                            ),
                          ) : const Text("");
                        } else if (snapshot.connectionState == ConnectionState.none) {
                          return Text(TranslationHelper.getFromLocale("noData", appContext.getContext()));
                        } else {
                          return Center(
                              child: SizedBox(
                                  height: size.height * 0.15,
                                  child: const Loading()
                              )
                          );
                        }
                      }
                    )
                  ),
                //),
              ),
            // Section title and order
            Positioned(
              bottom: 0,
              left: 0,
              child: SizedBox(
                height: 136,
                // our image take 200 width, thats why we set out total width - 200
                width: size.width - 200,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    const Spacer(),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
                      child: Text(
                        TranslationHelper.get(sectionDTO.title, appContext.getContext()),
                        style: Theme.of(context).textTheme.button,
                      ),
                    ),
                    // it use the available space
                    const Spacer(),
                    Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: kDefaultPadding * 1.5, // 30 padding
                        vertical: kDefaultPadding / 4, // 5 top and bottom
                      ),
                      decoration: const BoxDecoration(
                        color: kBlue2,
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(22),
                          topRight: Radius.circular(22),
                        ),
                      ),
                      child: Text(
                        "${sectionDTO.order!+1}",
                        //style: Theme.of(context).textTheme.button,
                        style: const TextStyle(color: Colors.white)
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}