import 'dart:convert';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/new_update_image_slider.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';

class ListViewCard extends StatefulWidget {
  final int index;
  final Key key;
  final List<ImageDTO> listItems;
  final AppContext appContext;
  final ValueChanged<List<ImageDTO>> onChanged;

  ListViewCard(
      this.listItems,
      this.index,
      this.key,
      this.appContext,
      this.onChanged
  );

  @override
  _ListViewCard createState() => _ListViewCard();
}

class _ListViewCard extends State<ListViewCard> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Card(
      margin: EdgeInsets.all(4),
      color: Colors.white,
      child: Container(
        width: 200,
        height: 200,
        child: InkWell(
          splashColor: kPrimaryColor,
          onTap: () {
            print("Item ${widget.listItems[widget.index]} selected.");
            showNewOrUpdateImageSlider(
                widget.listItems[widget.index],
                    (value) {
                  print("get result bébé");
                  setState(() {
                    //List<ImageDTO> test = new List<ImageDTO>.from(sliderDTO.images);

                    widget.listItems.add(value);
                    widget.onChanged(widget.listItems);
                  });
                },
                widget.appContext,
                context);
          },
          child: Container(
            decoration: boxDecoration(widget.listItems[widget.index], widget.appContext),
            padding: const EdgeInsets.all(15),
            margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
            child: Align(
                alignment: Alignment.center,
                child: getElement(widget.listItems[widget.index], size, widget.appContext)
            ),
          ),
        ),
      ),
    );
  }
}

getElement(ImageDTO imageDTO, Size size, AppContext appContext) {
  if (imageDTO.title != null) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          height: size.width *0.01,
        ),
        Align(
          alignment: Alignment.center,
          child: AutoSizeText(
            imageDTO.title == null ? "" : imageDTO.title[0].value,
            style: new TextStyle(fontSize: 20),
            maxLines: 1,
          ),
        ),
        Align(
            alignment: Alignment.bottomRight,
            child: Text("TODO")
        ),
      ],
    );
  } else {
    return Icon(
      Icons.add,
      color: kTextLightColor,
      size: 80.0,
    );
  }
}

boxDecoration(ImageDTO imageDTO, appContext) {
  return BoxDecoration(
    color: imageDTO.title == null ? Colors.lightGreen : kBackgroundColor,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(30.0),
    image: imageDTO.title != null ? new DecorationImage(
      fit: BoxFit.cover,
      colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
      image: new NetworkImage(
        imageDTO.source_,
      ),
    ) : null,
    boxShadow: [
      BoxShadow(
        color: kSecond,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}