import 'package:auto_size_text/auto_size_text.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';
import 'package:tablet_app/Components/loading_common.dart';
import 'package:tablet_app/Models/agenda.dart';
import 'package:tablet_app/Models/tabletContext.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart';

class EventListItem extends StatelessWidget {
  final EventAgenda eventAgenda;

  EventListItem({super.key, required this.eventAgenda});

  final DateFormat formatter = DateFormat('dd/MM/yyyy');

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    TabletAppContext tabletAppContext = appContext.getContext();
    var primaryColor = tabletAppContext.configuration != null ? tabletAppContext.configuration!.primaryColor != null ? new Color(int.parse(tabletAppContext.configuration!.primaryColor!.split('(0x')[1].split(')')[0], radix: 16)) : kTestSecondColor : kTestSecondColor;

    Size size = MediaQuery
        .of(context)
        .size;

    return Container(
      margin: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        //color: Colors.red,
        boxShadow: const [
          BoxShadow(
            color: Colors.black26,
            offset: Offset(0.0, 2.0),
            blurRadius: 6.0,
          ),
        ],
      ),
      //width: size.width * 0.5, //210.0,
      //constraints: const BoxConstraints(maxWidth: 210, maxHeight: 100),
      child: Column(
        children: [
          Container(
            height: size.height * 0.18, // must be same ref0
            constraints: const BoxConstraints(maxHeight: 250),
            width: size.width*1,
            child: Stack(
              children: [
                eventAgenda.image != null ? ClipRRect(
                  borderRadius: const BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
                  child: Container(
                    constraints: const BoxConstraints(maxHeight: 175, maxWidth: 250),
                    child: CachedNetworkImage(
                      imageUrl: eventAgenda.image!,
                      width: size.width,
                      height: size.height * 0.2, // must be same ref0
                      fit: BoxFit.cover,
                      progressIndicatorBuilder: (context, url, downloadProgress) {
                        return Center(
                          child: SizedBox(
                            width: 50,
                            height: 50,
                            child: LoadingCommon(),
                          ),
                        );
                      },
                      errorWidget: (context, url, error) => Icon(Icons.error),
                    )
                  ),
                ): SizedBox(),
                Positioned(
                  right: 0.0,
                  bottom: 0.0,
                  child: Container(
                    decoration: const BoxDecoration(
                      color: kTestSecondColor, // TODO
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20.0),
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 10.0,
                          right: 10.0,
                          top: 2.0,
                          bottom: 2.0),
                      child: Column(
                        crossAxisAlignment:
                        CrossAxisAlignment.start,
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              const Icon(
                                Icons.calendar_today_rounded,
                                size: 10.0,
                                color: kBackgroundColor,
                              ),
                              const SizedBox(width: 5.0),
                              Text(
                                eventAgenda.dateFrom!.isAtSameMomentAs(eventAgenda.dateTo!) ? "${formatter.format(eventAgenda.dateFrom!)}": "${formatter.format(eventAgenda.dateFrom!)} - ${formatter.format(eventAgenda.dateTo!)}",
                                style: TextStyle(
                                  color: kBackgroundColor,
                                  fontSize: 12
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            /*height: size.height * 0.13,
            constraints: BoxConstraints(maxHeight: 120),*/
            child: Container(
              width: size.width,
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20.0), bottomRight: Radius.circular(20.0)),
                border: Border(top: BorderSide(width: 0.1, color: kMainGrey))
              ),
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    AutoSizeText(
                      eventAgenda.name!.length > 30 ? eventAgenda.name!.substring(0, 30) + " ..." : eventAgenda.name!,
                      style: TextStyle(fontSize: 14.0),
                      maxFontSize: 14,
                      textAlign : TextAlign.center
                    ),
                    AutoSizeText(
                      eventAgenda.type!,
                      maxFontSize: 12.0,
                      style: TextStyle(
                        fontSize: 10.0,
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}