import 'dart:convert';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:managerapi/api.dart';
import 'package:tablet_app/constants.dart';

class SliderViewWidget extends StatefulWidget {
  final SectionDTO section;
  SliderViewWidget({this.section});

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

class _SliderViewWidget extends State<SliderViewWidget> {
  SliderDTO sliderDTO;
  @override
  void initState() {
    print(widget.section.data);
    sliderDTO = SliderDTO.fromJson(jsonDecode(widget.section.data));
    print(sliderDTO);

    sliderDTO.images.sort((a, b) => a.order.compareTo(b.order));

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Padding(
      padding: const EdgeInsets.only(top: 75),
      child: Center(
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              if(sliderDTO.images != null && sliderDTO.images.length > 0)
                CarouselSlider(
                  options: CarouselOptions(
                    height: size.height *0.3,
                    enlargeCenterPage: true,
                    reverse: false,
                  ),
                  items: sliderDTO.images.map<Widget>((i) {
                    return Builder(
                      builder: (BuildContext context) {
                        return Container(
                            width: MediaQuery.of(context).size.width,
                            margin: EdgeInsets.symmetric(horizontal: 5.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10.0),
                              border: Border.all(width: 0.3, color: kSecondGrey),
                            ),
                            child: Image.network(
                                i.source_,
                                fit: BoxFit.contain
                            )
                        );
                      },
                    );
                  }).toList(),
                ),
              // Description
              /*Container(
                height: sliderDTO.images != null && sliderDTO.images.length > 0 ? size.height *0.3 : size.height *0.6,
                width: MediaQuery.of(context).size.width *0.35,
                decoration: BoxDecoration(
                  color: kBackgroundLight,
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(10.0),
                  boxShadow: [
                    BoxShadow(
                      color: kBackgroundSecondGrey,
                      spreadRadius: 0.5,
                      blurRadius: 1.1,
                      offset: Offset(0, 1.1), // changes position of shadow
                    ),
                  ],
                ),
                child: SingleChildScrollView(
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Text(sliderDTO., textAlign: TextAlign.center, style: TextStyle(fontSize: 15)),
                  ),
                ),
              ),*/
            ]
        ),
      ),
    );
  }
}