import 'package:flutter/material.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';

import '../../generated/l10n.dart';
import '../../utils/util_web.dart' if (dart.library.io) '../../utils/util_io.dart';
import '../../widgets/general/breadcrumbs.dart';

class DesktopiGoShowLearnMore extends StatefulWidget {
  final Map<String, dynamic> data;
  const DesktopiGoShowLearnMore(this.data, {Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return DesktopiGoShowLearnMoreState();
  }

}

class DesktopiGoShowLearnMoreState extends State<DesktopiGoShowLearnMore> {
  double sideSpace = 0;
  double mainSpace = 1200;

  @override
  Widget build(BuildContext context) {
    if (MediaQuery.of(context).size.width <= 1200) {
      mainSpace = MediaQuery.of(context).size.width;
      sideSpace = 0;
    } else {
      mainSpace = 1200;
      sideSpace = (MediaQuery.of(context).size.width - 1200) / 2;
    }
    Column col = Column(
      children: [
        Util.showImage(
            'https:${widget.data['image-top']['image']}'
        ),
      ],
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
    );
    List<Widget> w = _getContent();
    Wrap wrap = Wrap(
      children: [],
    );
    for (int i = 0; i < w.length; i++) {
      wrap.children.add(w[i]);
    }
    col.children.add(wrap);

    Widget view = SingleChildScrollView(
      child: Row(
        children: [
          Container(
            width: sideSpace,
          ),
          Container(
            width: mainSpace,
            child: col,
          ),
          Container(
            width: sideSpace,
          ),
        ],
      ),
    );
    return view;
  }

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

  List<Widget> _getContent() {
    List<Widget> widgets = [];
    for (int i = 0; i < (widget.data['sections'] as List).length; i++) {
      Column col = Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [],
      );
      if ((widget.data['sections'] as List)[i]['image'] != null) {
        col.children.add(
          Container(
            padding: EdgeInsets.only(
                top: 10.0, left: 8.0, right: 8.0, bottom: 8.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Util.showImage(
                'https:${(widget
                    .data['sections'] as List)[i]['image']['image']}',
                fit: BoxFit.contain,
              ),
            ),
          ),
        );
      } else if (((widget.data['sections'] as List)[i]['youtube_videos'] as List).length > 0) {
        YoutubePlayerController _controller = YoutubePlayerController(
          initialVideoId: '${((widget.data['sections'] as List)[i]['youtube_videos'] as List)[0] as String}',
          params: YoutubePlayerParams(
            playlist: ((widget.data['sections'] as List)[i]['youtube_videos'] as List).length > 1 ?
            ((widget.data['sections'] as List)[i]['youtube_videos'] as List).map((e) {
              return '$e';
            }).toList() : [], // Defining custom playlist
            startAt: Duration(seconds: 0),
            showControls: true,
            showFullscreenButton: false,
          ),
        );
        col.children.add(
          Container(
            padding: EdgeInsets.only(
              top: 10.0, left: 8.0, right: 8.0, bottom: 8.0,
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: YoutubePlayerIFrame(
                controller: _controller,
                aspectRatio: 1.7778,
              ),
            ),
          ),
        );
      }
      col.children.add(Container(
        margin: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0, bottom: 4.0),
        child: Text(
          '${(widget.data['sections'] as List)[i]['title']}',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16.0,
            color: Colors.black87,
          ),
        ),
      ));
      col.children.add(Container(
        margin: EdgeInsets.only(top: 4.0, left: 8.0, right: 8.0, bottom: 20.0),
        padding: EdgeInsets.only(bottom: 10.0),
        child: Text(
          '${(widget.data['sections'] as List)[i]['description']}',
          style: TextStyle(
            fontSize: 14.0,
            color: Colors.black38,
          ),
        ),
      ));
      widgets.add(Container(
        width: mainSpace / 2,
        child: col,
      ));
    }
    return widgets;
  }
}