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) {
    return Card(
      margin: EdgeInsets.all(4),
      child: Stack(
        children: [
          Container(
            width: 200,
            height: 250,
            decoration: BoxDecoration(
              color: kWhite,
              border: Border.all(width: 0.5, color: kSecond),
            ),
            child: Padding(
              padding: const EdgeInsets.only(right: 20.0),
              child: Column(
                children: [
                  AutoSizeText(
                    widget.listItems[widget.index].title == null ? "" : widget.listItems[widget.index].title[0].value,
                    style: new TextStyle(fontSize: 20),
                    maxLines: 1,
                  ),
                  Container(
                    height: MediaQuery.of(context).size.height * 0.1,
                    decoration: boxDecoration(widget.listItems[widget.index], widget.appContext),
                    padding: const EdgeInsets.all(15),
                    margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: AutoSizeText(
                      widget.listItems[widget.index].description == null ? "" : widget.listItems[widget.index].description[0].value,
                      style: new TextStyle(fontSize: 20),
                      maxLines: 3,
                    ),
                  ),
                ],
              ),
            ),
          ),
          Positioned(
              right: 0,
              bottom: 0,
              child: Row(
                children: [
                  InkWell(
                      onTap: () {
                        showNewOrUpdateImageSlider(
                            widget.listItems[widget.index],
                            (value) {
                              setState(() {
                                widget.listItems[widget.index] = value;
                                widget.onChanged(widget.listItems);
                              });
                            },
                            widget.appContext,
                            context);
                      },
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(
                          Icons.edit,
                          color: kPrimaryColor,
                          size: 25.0,
                        ),
                      )
                  ),
                  InkWell(
                      onTap: () {
                          widget.listItems.removeAt(widget.index);
                          widget.onChanged(widget.listItems);
                      },
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(
                          Icons.delete,
                          color: kPrimaryColor,
                          size: 25.0,
                        ),
                      )
                  ),
                ],
              )
          ),
        ],
      ),
    );
  }
}

boxDecoration(ImageDTO imageDTO, appContext) {
  return BoxDecoration(
    color: kBackgroundColor,
    shape: BoxShape.rectangle,
    border: Border.all(width: 1.5, color: kSecond),
    borderRadius: BorderRadius.circular(10.0),
    image: imageDTO.title != null ? new DecorationImage(
      fit: BoxFit.scaleDown,
      image: new NetworkImage(
        imageDTO.source_,
      ),
    ) : null,
    boxShadow: [
      BoxShadow(
        color: kSecond,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}