import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:photo_view/photo_view.dart';

import '../../constants.dart';
import '../../models/blog.dart';
import '../../routes.dart';
import '../../store/actions.dart';
import '../../store/store.dart';
import '../../utils/http_util.dart';
import '../../utils/utils.dart';

import '../../utils/util_io.dart' if (dart.library.html) '../../utils/util_web.dart';

class MobileViewBlog extends StatefulWidget {
  final Key key;
  final int bid;

  const MobileViewBlog(this.bid, {this.key}) : super(key: key);

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

class MobileViewBlogState extends State<MobileViewBlog> {
  Blog blog;

  @override
  void initState() {
    super.initState();
    _loadBlog();
  }

  void _loadBlog() {
    HttpUtil.httpGet(
      'v1/blog/${widget.bid}',
      businessId: Constants.BUSINESS_ID,
    ).then((value) {
      if (mounted) {
        setState(() {
          blog = Blog.fromJson(value);
          print('blog: $blog');
        });
      }
    }).catchError((error) {
      Utils.showMessageDialog(context, error, onOk: () {
        Routes.router.pop(context);
        Routes.router.pop(context);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    store.dispatch(UpdateContext(context));

    BuildContext mainContext = context;

    if (blog == null) {
      return Container(
        padding: EdgeInsets.all(50.0),
        child: Center(
          child: SpinKitThreeBounce(
            color: Colors.lightBlueAccent,
            size: 40.0,
          ),
        ),
      );
    }

    Column view = Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(left: 16.0, top: 16.0, right: 16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Expanded(
                child: Text(
                  '${blog.title}',
                  style: TextStyle(
                      fontSize: 24.0,
                      color: Colors.black
                  ),
                ),
              ),
              Text(
                Utils.utcDatetimeStringToLocalDatetimeString(context, blog.createdAt),
                style: TextStyle(
                  fontSize: 14.0,
                  color: Colors.black38,
                ),
              )
            ],
          ),
        ),
        Container(
          width: double.maxFinite,
          padding: EdgeInsets.only(top: 8.0, left: 16.0, right: 16.0, bottom: 24.0),
          child: Text(
            '${blog.body}',
            style: TextStyle(
              color: Colors.black87,
              fontSize: 17.0,
            ),
          ),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                width: 0.5,
                color: Colors.black12,
              ),
            ),
          ),
        ),
        Container(
          width: double.maxFinite,
          padding: EdgeInsets.only(top: 16.0, bottom: 16.0, left: 16.0, right: 16.0),
          child: (blog.imageUrl != null) ?
          Container(
            width: min(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height) - 100.0,
            height: min(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height) - 100.0,
            child: Util.showImage('https:${blog.imageUrl}'),
          ) : SizedBox.shrink(),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                width: 0.5,
                color: Colors.black45,
              ),
            ),
          ),
        ),
      ],
    );

    return SingleChildScrollView(
      child: view,
    );
  }
}