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/resourceModel.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);
    ResourceModel? resourceModel;

    getResource(String? imageId) async {
      await DatabaseHelper.instance.queryWithColumnId(DatabaseTableType.resources, sectionDTO!.imageId!).then((value) {
        resourceModel = DatabaseHelper.instance.getResourceFromDB(value.first);
      });
    }

    return Container(
      margin: EdgeInsets.symmetric(
        horizontal: kDefaultPadding,
        vertical: sectionDTO.order!+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: Colors.white,
                  border: Border.all(
                    color: kBlue2,
                    width: 0.2,
                  ),
                  borderRadius: BorderRadius.circular(22),
                ),
              ),
            ),
            // 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: getResource(sectionDTO.imageId),
                    builder: (context, AsyncSnapshot<dynamic> snapshot) {
                      if (snapshot.connectionState == ConnectionState.done) {
                        return resourceModel != null ? Container(
                          child: ClipRRect(
                            borderRadius: const BorderRadius.only(topRight: Radius.circular(20), bottomRight: Radius.circular(20)),
                            child: Image.memory(
                                base64Decode(resourceModel!.data!),
                                fit: BoxFit.cover
                            ),
                          ),
                        ) : const Text("");
                      } else if (snapshot.connectionState == ConnectionState.none) {
                        return Text(TranslationHelper.getFromLocale("noData", appContext));
                      } 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(
                        sectionDTO != null ? TranslationHelper.get(sectionDTO!.title, appContext) : "",
                        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)
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }


}