import 'package:flutter/material.dart';
import '../../generated/l10n.dart';
import '../../widgets/general/text_link.dart';
import '../../utils/util_web.dart' if (dart.library.io) '../../utils/util_io.dart';

class MobileIndexMainContent2 extends StatefulWidget {
  final Map<String, dynamic> content;

  const MobileIndexMainContent2(this.content, {Key key}) : super(key: key);

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

class MobileIndexMainContent2State extends State<MobileIndexMainContent2> {

  @override
  Widget build(BuildContext context) {
    if (widget.content == null) {
      return Container();
    }
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 0.0),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
                child: Text(
                  '${widget.content['minipos']}',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.blueGrey,
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
                child: Text(
                  '${widget.content['point_of_sale_system_solution']}',
                  style: TextStyle(
                    fontSize: 15.0,
                    color: Colors.grey,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10.0),
          child: Util.showImage(
            'https:${widget.content['minipos_image']['image']}',
            fit: BoxFit.fitWidth
          ),
        ),
        _buildMiniPosFeatures(),
      ],
    );
  }

  Widget _buildMiniPosFeatures() {
    Column col = Column(
      children: [],
    );
    for (int i = 0; i < (widget.content['minipos_features'] as List).length; i++) {
      col.children.add(Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 5.0),
            child: Icon(
              Icons.circle,
              size: 10.0,
              color: Colors.black87,
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width - 40.0,
            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
            child: Text(
              '${(widget.content['minipos_features'] as List)[i]}',
              style: TextStyle(
                color: Colors.black54,
              ),
            ),
          ),
        ],
      ));
    }
    col.children.add(
      Container(
        alignment: Alignment.centerRight,
        child: TextLink(
          S.of(context).learn_more,
          '/minipos-learn-more',
          fontWeight: FontWeight.bold,
        ),
      ),
    );
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
      child: col,
    );
  }

}