import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/fetch_section_icon.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';

class ListViewCardSections extends StatefulWidget {
  final int index;
  final Key key;
  final List<SectionDTO> sections;
  final AppContext appContext;
  final Function onSelect;
  //final ValueChanged<List<ImageGeoPoint>> onChanged;

  ListViewCardSections(
      this.sections,
      this.index,
      this.key,
      this.appContext,
      this.onSelect
      );

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

class _ListViewCardSectionsState extends State<ListViewCardSections> {
  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;

    return Card(
      margin: EdgeInsets.all(4),
      child: Center(
        child: Stack(
          children: [
            InkWell(
              onTap: () {
                widget.onSelect(widget.sections[widget.index]);
              },
              child: Container(
                width: 250,
                height: 200,
                child: Padding(
                  padding: const EdgeInsets.only(right: 30.0),
                  child: getElement(widget.index, widget.sections[widget.index], size, appContext)
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  getElement(int index, SectionDTO sectionDTO, Size size, AppContext appContext) {
    return Container(
      decoration: boxDecoration(sectionDTO, appContext),
      padding: const EdgeInsets.all(15),
      margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
      child: Align(
        alignment: Alignment.center,
          child: getDetails(sectionDTO, size),
      ),
    );
  }

  getDetails(dynamic element, Size size) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Align(
          alignment: Alignment.center,
          child: AutoSizeText(
            element.label,
            style: new TextStyle(fontSize: 15),
            maxLines: 2,
            textAlign: TextAlign.center,
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Icon(
            getSectionIcon(element.type),
            color: kPrimaryColor,
            size: 25,
          ),
        ),
      ],
    );
  }
}

boxDecoration(SectionDTO sectionDTO, appContext) {
  return BoxDecoration(
    color: kBackgroundColor,
    shape: BoxShape.rectangle,
    border: Border.all(width: 1.5, color: kSecond),
    borderRadius: BorderRadius.circular(10.0),
    image: sectionDTO.imageSource != null ? new DecorationImage(
      fit: BoxFit.cover,
      colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.18), BlendMode.dstATop),
      image: new NetworkImage(
        sectionDTO.imageSource,
      ),
    ) : null,
    boxShadow: [
      BoxShadow(
        color: kSecond,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}