import 'dart:async';
import 'dart:collection';

import 'package:flutter/material.dart';

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

class CustomersLogo extends StatefulWidget {

  const CustomersLogo({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => CustomersLogoState();
}

class CustomersLogoState extends State<CustomersLogo> {
  double sideSpace = 0;
  double mainSpace = 1200;
  bool _visible = true;
  List<dynamic> images = [];
  var timer;

  @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;
    }
    return Container(
      width: MediaQuery.of(context).size.width,
      margin: EdgeInsets.only(top: 20.0),
      padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 0.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: sideSpace,
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 0),
            width: mainSpace,
            child: _getBody(),
          ),
          Container(
            width: sideSpace,
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _loadData();
    timer = Timer.periodic(
      const Duration(seconds: 10,), ((t) {
        setState(() {
          _visible = false;
        });
        Future.delayed(const Duration(milliseconds: 500), () {
          _loadData();
        });
      })
    );
  }

  void _loadData() {
    HttpUtil.httpGet('v1/get-random-customer-logos')
        .then((value) {
      print('the value: $value');
      if (mounted) {
        setState(() {
          images = value;
          _visible = true;
        });
      }
    });
  }

  Widget _getBody() {
    List<Widget> children = [];
    for (int i = 0; i < images.length; i++) {
      Container container = Container(
        padding: EdgeInsets.only(left: 0, top: 0, right: 0, bottom: 0),
        child: Util.showImage(images[i]['image'], width: mainSpace / 8),
      );
      children.add(container);
    }
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.only(top: 0, bottom: 16, left: 0, right: 0),
          child: Text(
            S.of(context).used_and_trust_by,
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Colors.blueGrey,
            ),
          ),
        ),
        AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,
          duration: const Duration(milliseconds: 500),
          child: Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: children,
            ),
          ),
        ),
      ],
    );
  }
}