import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:universal_io/io.dart';

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

class MobileContactUs extends StatefulWidget {
  final Business business;

  const MobileContactUs(this.business, {Key key}) : super(key: key);

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

}

class MobileContactUsState extends State<MobileContactUs> {

  String mapUrl = 'https://goo.gl/maps/M365MF5AW35n9ij67';

  Completer<GoogleMapController> _controller = Completer();
  LatLng _lastMapPosition;
  final Set<Marker> _markers = {};
  final Set<Polyline> _polyLine = {};

  void _onMapCreated(GoogleMapController controller) {
    _controller.complete(controller);
  }

  void _onCameraMove(CameraPosition position) {
    _lastMapPosition = position.target;
  }

  @override
  Widget build(BuildContext context) {
    Column col = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [],
    );

    col.children.add(
        Container(
          padding: EdgeInsets.only(top: 20.0, left: 16, right: 16, bottom: 20),
          child: Center(
            child: Text(
              S.of(context).contact_us,
              style: TextStyle(
                fontSize: 36,
              ),
            ),
          ),
        )
    );
    col.children.add(
      Container(
        padding: EdgeInsets.only(left: 16.0, right: 16.0, top: 0, bottom: 20),
        child: Row(
          children: [
            Container(
              padding: EdgeInsets.only(right: 20),
              child: Util.showImage(
                '${widget.business.picUrl}',
                width: 100,
                height: 100,
              ),
            ),
            Container(
              child: Text(
                '${widget.business.name}',
                style: TextStyle(
                  fontSize: 20,
                ),
              ),
            ),
          ],
        ),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              width: 1.0,
              color: Colors.black38,
            ),
          ),
        ),
      ),
    );
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 8.0, right: 8.0, top: 8, bottom: 8),
          child: Container(
            padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: 8),
            child: Row(
              children: [
                Container(
                  padding: EdgeInsets.only(right: 8.0),
                  child: Icon(Icons.mail_outline, size: 18, color: Colors.black38,),
                ),
                Text(
                  S.of(context).by_email,
                  style: TextStyle(
                    color: Colors.black38,
                  ),
                ),
              ],
            ),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  width: 1.0,
                  color: Colors.black12,
                ),
              ),
            ),
          ),
        )
    );
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 4),
          child: TextLink(
            'support@wisetronic.com',
            'support@wisetronic.com',
            isEmail: true,
          ),
        )
    );
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 8.0, right: 8.0, top: 8, bottom: 8),
          child: Container(
            padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: 8),
            child: Row(
              children: [
                Container(
                  padding: EdgeInsets.only(right: 8.0),
                  child: Icon(Icons.phone, size: 18, color: Colors.black38,),
                ),
                Text(
                  S.of(context).by_phone,
                  style: TextStyle(
                    color: Colors.black38,
                  ),
                ),
              ],
            ),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  width: 1.0,
                  color: Colors.black12,
                ),
              ),
            ),
          ),
        )
    );
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 4),
          child: TextLink(
            '905-604-8861',
            '905-604-8861',
            isPhone: true,
          ),
        )
    );
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 4),
          child: TextLink(
            '905-604-6681',
            '905-604-6681',
            isPhone: true,
          ),
        )
    );
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 4),
          child: Row(
            children: [
              Container(
                child: Text(
                  S.of(context).toll_free,
                ),
              ),
              Container(
                child: TextLink(
                  '1-855-278-8026',
                  '1-855-278-8026',
                  isPhone: true,
                ),
              ),
            ],
          ),
        )
    );
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 8.0, right: 8.0, top: 8, bottom: 8),
          child: Container(
            padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: 8),
            child: Row(
              children: [
                Container(
                  padding: EdgeInsets.only(right: 8.0),
                  child: Icon(Icons.location_on, size: 18, color: Colors.black38,),
                ),
                Text(
                  S.of(context).address,
                  style: TextStyle(
                    color: Colors.black38,
                  ),
                ),
              ],
            ),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  width: 1.0,
                  color: Colors.black12,
                ),
              ),
            ),
          ),
        )
    );
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 4),
          child: Text(
            '${widget.business.address.addressLine1}',
          ),
        )
    );
    if (widget.business.address.addressLine2 != null && widget.business.address.addressLine2.isNotEmpty) {
      col.children.add(
          Container(
            padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 4),
            child: Text(
              '${widget.business.address.addressLine2}',
            ),
          )
      );
    }
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 4),
          child: Text(
            '${widget.business.address.city}, ${widget.business.address.state}',
          ),
        )
    );
    col.children.add(
        Container(
          padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 4),
          child: Text(
            '${widget.business.address.country}, ${widget.business.address.zip}',
          ),
        )
    );
    if (Platform.isAndroid || Platform.isIOS) {
      _markers.clear();
      _markers.add(Marker(
        markerId: MarkerId('shop_position'),
        position: LatLng(double.parse(widget.business.address.lat),
            double.parse(widget.business.address.lng)),
        infoWindow: InfoWindow(
          title: S
              .of(context)
              .store,
          snippet: '',
        ),
      ));
      col.children.add(
        Container(
          height: 200,
          padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 20),
          child: GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(
              target: LatLng(
                  double.parse(widget.business.address.lat),
                  double.parse(widget.business.address.lng)),
              zoom: 14.0,
            ),
            onCameraMove: _onCameraMove,
            markers: _markers,
            gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
              new Factory<OneSequenceGestureRecognizer>(() => new EagerGestureRecognizer(),)
            ].toSet(),
          ),
        ),
      );
    } else {
      col.children.add(
          Container(
            padding: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 20),
            child: TextLink(
              S.of(context).view_on_google_map,
              mapUrl,
              isLink: true,
            ),
          )
      );
    }
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: (){
            Navigator.of(context).pop();
          },
        ),
        title: Text(S.of(context).contact_us),
        backgroundColor: Theme.of(context).primaryColor,
      ),
      body: SingleChildScrollView(
        child: col,
      ),
    );
  }
}