import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import "package:universal_html/html.dart";

import '../../constants.dart';
import '../../generated/l10n.dart';
import '../../utils/extensions.dart';
import '../../utils/util_web.dart' if (dart.library.io) '../../utils/util_io.dart';
import '../../utils/utils.dart';

class DownloadItem extends StatefulWidget {
  final dynamic desc;
  final double width;
  const DownloadItem(this.desc, {Key key, this.width}) : super(key: key);

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

}

class DownloadItemState extends State<DownloadItem> {
  final double buttonWidth = 122.0;
  final double iconWidth = 48.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width ?? MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(top: 10.0, bottom: 20.0, left: 10.0, right: 10.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  child: Row(
                    children: [
                      Container(
                        child: Util.showImage(
                          '${widget.desc['app_icon']}',
                        ),
                        width: iconWidth,
                        height: iconWidth,
                        margin: EdgeInsets.only(right: 16.0),
                      ),
                      Container(
                        width: widget.width != null ? widget.width - iconWidth - buttonWidth - 60 : MediaQuery.of(context).size.width - iconWidth - buttonWidth - 60,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '${widget.desc['name']}',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 15.0,
                                color: Colors.black87,
                              ),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            Text(
                              '${widget.desc['version']}',
                              style: TextStyle(
                                fontSize: 12.0,
                                color: Colors.black38,
                              ),
                            ),
                            getSupportedOSs(),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  width: buttonWidth,
                  child: getDownloadButton(),
                ),
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
            child: Text(
              '${widget.desc['description']}',
              style: TextStyle(
                color: Colors.black54,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget getSupportedOSs() {
    Row row = Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [],
    );
    for (int i = 0; i < (widget.desc['urls'] as List).length; i++) {
      switch((widget.desc['urls'] as List)[i]['os']) {
        case 'windows':
          row.children.add(Container(
            margin: EdgeInsets.all(3.0),
            child: Icon(
              IconData(
                  Constants.FONT_WINDOWS,
                  fontFamily: 'wisetronic',
                  fontPackage: null
              ),
              color: Colors.green,
              size: 20.0,
            ),
          ));
          break;
        case 'mac':
          row.children.add(Container(
            margin: EdgeInsets.all(3.0),
            child: Icon(
              IconData(
                  Constants.FONT_APPLE,
                  fontFamily: 'wisetronic',
                  fontPackage: null
              ),
              color: Colors.green,
              size: 20.0,
            ),
          ));
          break;
        case 'ubuntu':
          row.children.add(Container(
            margin: EdgeInsets.all(3.0),
            child: Icon(
              IconData(
                  Constants.FONT_UBUNTU,
                  fontFamily: 'wisetronic',
                  fontPackage: null
              ),
              color: Colors.green,
              size: 20.0,
            ),
          ));
          break;
        case 'android':
          row.children.add(Container(
            margin: EdgeInsets.all(3.0),
            child: Icon(
              IconData(
                  Constants.FONT_ANDROID,
                  fontFamily: 'wisetronic',
                  fontPackage: null
              ),
              color: Colors.green,
              size: 20.0,
            ),
          ));
          break;
        case 'ios':
          row.children.add(Container(
            margin: EdgeInsets.all(3.0),
            child: Icon(
              IconData(
                  Constants.FONT_IOS,
                  fontFamily: 'wisetronic',
                  fontPackage: null
              ),
              color: Colors.green,
              size: 20.0,
            ),
          ));
          break;
      }
    }
    return row;
  }

  Widget getDownloadButton() {
    String downloadUrl;
    String os = Utils.getOs();
    String selectedOs;
    List<String> supportedOss = [];
    for (int i = 0; i < (widget.desc['urls'] as List).length; i++) {
      supportedOss.add((widget.desc['urls'] as List)[i]['os']);
      if ((widget.desc['urls'] as List)[i]['url'] == 'instore') {
        downloadUrl = 'instore';
      }
      if ((widget.desc['urls'] as List)[i]['os'] == os) {
        selectedOs = (widget.desc['urls'] as List)[i]['os'];
        downloadUrl = (widget.desc['urls'] as List)[i]['url'];
        break;
      }
    }

    if (downloadUrl != null && downloadUrl == 'instore') {
      return Container(
        padding: EdgeInsets.all(8.0),
        child: Text(
          S.of(context).install_in_store,
          style: TextStyle(
            color: Colors.black54,
            fontSize: 11.5,
          ),
          textAlign: TextAlign.center,
        ),
        decoration: BoxDecoration(
          // color: Colors.black54,
          border: Border(
            top: BorderSide(
              width: 0.5,
              color: Colors.black54,
            ),
            bottom: BorderSide(
              width: 0.5,
              color: Colors.black54,
            ),
            left: BorderSide(
              width: 0.5,
              color: Colors.black54,
            ),
            right: BorderSide(
              width: 0.5,
              color: Colors.black54,
            ),
          ),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(5.0),
            topRight: Radius.circular(5.0),
            bottomLeft: Radius.circular(5.0),
            bottomRight: Radius.circular(5.0),
          ),
        ),
      );
    } else if (downloadUrl != null && downloadUrl.isNotEmpty) {
      return ElevatedButton(
        style: ElevatedButton.styleFrom(
          primary: Theme.of(context).primaryColor,
          padding: EdgeInsets.all(8)
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: EdgeInsets.only(right: 0.0, left: 6.0, top: 6.0, bottom: 6.0),
              child: Icon(
                IconData(
                    Utils.getOsFontHex(selectedOs),
                    fontFamily: 'wisetronic',
                    fontPackage: null
                ),
                color: Colors.white,
                size: 18.0,
              ),
            ),
            Container(
              padding: EdgeInsets.all(6.0),
              child: Text(
                S.of(context).download,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
        onPressed: () async {
          if (kIsWeb) {
            AnchorElement anchorElement = new AnchorElement(href: downloadUrl);
            anchorElement.download = downloadUrl;
            anchorElement.click();
          } else {
            if (!await launchUrl(Uri.parse('$downloadUrl'))) {
              throw 'Could not launch $downloadUrl';
            }
          }
        },
      );
    } else {
      return Container(
        padding: EdgeInsets.all(8.0),
        child: Text(
          S.of(context).download_with_token(supportedOss.join(', ').eachFirstCap),
          style: TextStyle(
            color: Colors.black54,
            fontSize: 11.5,
          ),
          textAlign: TextAlign.center,
        ),
        decoration: BoxDecoration(
          // color: Colors.black54,
          border: Border(
            top: BorderSide(
              width: 0.5,
              color: Colors.black54,
            ),
            bottom: BorderSide(
              width: 0.5,
              color: Colors.black54,
            ),
            left: BorderSide(
              width: 0.5,
              color: Colors.black54,
            ),
            right: BorderSide(
              width: 0.5,
              color: Colors.black54,
            ),
          ),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(5.0),
            topRight: Radius.circular(5.0),
            bottomLeft: Radius.circular(5.0),
            bottomRight: Radius.circular(5.0),
          ),
        ),
      );
    }
  }
}