import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_wisetronic/widgets/general/text_link.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:universal_io/io.dart';

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

class DesktopContactUs extends StatefulWidget {
  final Business business;

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

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

}

class DesktopContactUsState extends State<DesktopContactUs> {
  double sideSpace = 0;
  double mainSpace = 1200;

  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) {
    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(
      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: MiniNavigationBar(
        title: S.of(context).blog,
        back: true,
        breadCrumbs: [
          BreadCrumb(S.of(context).contact_us, null),
        ],
        breadCrumbHeight: Constants.BREADCRUMB_HEIGHT,
      ),
      body: SingleChildScrollView(
        child: Row(
          children: [
            Container(
              width: sideSpace,
            ),
            Expanded(child: col,),
            Container(
              width: sideSpace,
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNav(),
    );
  }

}