import 'package:app1551/ui/ticket_detail_page/ticket_detail_state.dart';
import 'package:app1551/ui/ticket_detail_page/widgets/real_rich_text.dart';
import 'package:app1551/utils/colors.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:redux/redux.dart';

class TicketDetailDescription extends StatelessWidget {
  final Store<TicketDetailState> store;
  final double height;

  TicketDetailDescription(
      {Key key, Store<TicketDetailState> this.store, this.height})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    var tp = TextPainter(
        text: TextSpan(
            text: TicketDetailState.ticket.description,
            style: TextStyle(
                fontSize: MediaQuery.of(context).size.width>320?13:11,
                color: Color.fromARGB(255, 72, 72, 70),
                fontFamily: Fonts.gothamPro,
                height: 1.5)),
        maxLines: 1,
        textDirection: TextDirection.ltr);
    tp.layout(maxWidth: MediaQuery.of(context).size.width - 32);
    var contentHeight = height - 250;
    var maxLines = contentHeight / tp.preferredLineHeight;
    maxLines = maxLines<1?1:maxLines;
    var tp2 = TextPainter(
        text: TextSpan(
            text: TicketDetailState.ticket.description,
            style: TextStyle(
                fontSize: MediaQuery.of(context).size.width>320?13:11,
                color: Color.fromARGB(255, 72, 72, 70),
                fontFamily: Fonts.gothamPro,
                height: 1.5)),
        maxLines: maxLines.toInt(),
        textDirection: TextDirection.ltr);
    tp2.layout(maxWidth: MediaQuery.of(context).size.width - 32);

    var showBtn = tp2.didExceedMaxLines;

    return Container(
      margin: EdgeInsets.only(bottom: 24),
      child: AnimatedCrossFade(
        duration: Duration(milliseconds: 200),
        crossFadeState: store.state.expandDescription
            ? CrossFadeState.showSecond
            : CrossFadeState.showFirst,
        firstChild: Stack(
          alignment: Alignment.bottomRight,
          children: <Widget>[
            RealRichText(
              [
                TextSpan(
                    text: TicketDetailState.ticket.description,
                    style: TextStyle(
                        fontSize: MediaQuery.of(context).size.width>320?13:11,
                        color: Color.fromARGB(255, 72, 72, 70),
                        fontFamily: Fonts.gothamPro,
                        height: 1.5)),

              ],
              maxLines: maxLines.toInt(),
            ),
            if (showBtn)
              Container(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        colors: [
                      Colors.white.withOpacity(0),
                      Col.white,
                      Col.white
                    ])),
                child: Padding(
                  padding: const EdgeInsets.only(bottom: 0),
                  child: GestureDetector(
                    onTap: () {
                      store.dispatch(TicketDetailActions.ToggleDescription);
                    },
                    child: RealRichText(
                      [
                        TextSpan(text: "                        "),
                        TextSpan(
                          text: showBtn ? 'Більше ' : "",
                          style: TextStyle(
                              fontSize: MediaQuery.of(context).size.width>320?13:11,
                              color: Colors.deepPurple[300].withOpacity(0.7),
                              fontFamily: Fonts.gothamPro,
                              decoration: TextDecoration.underline),
                        ),
                        if (showBtn)
                          ImageSpan(
                            AssetImage("assets/icons/chevron_down.png"),
                            imageHeight: 12,
                            imageWidth: 12,
                          )
                      ],
                      maxLines: maxLines.toInt(),
                    ),
                  ),
                ),
              )
          ],
        ),
        secondChild: RealRichText(
          [
            TextSpan(
                text: '${TicketDetailState.ticket.description} ',
                style: TextStyle(
                    fontSize: MediaQuery.of(context).size.width>320?13:11,
                    color: Color.fromARGB(255, 72, 72, 70),
                    fontFamily: Fonts.gothamPro,
                    height: 1.5)),
            TextSpan(
                text: 'Менше ',
                style: TextStyle(
                    fontSize: MediaQuery.of(context).size.width>320?13:11,
                    color: Colors.deepPurple[300].withOpacity(0.7),
                    fontFamily: Fonts.gothamPro,
                    decoration: TextDecoration.underline),
                recognizer: new TapGestureRecognizer()
                  ..onTap = () {
                    store.dispatch(TicketDetailActions.ToggleDescription);
                  }),
            if (showBtn)
              ImageSpan(
                AssetImage("assets/icons/chevron_up.png"),
                imageHeight: 12,
                imageWidth: 12,
              )
          ],
        ),
      ),
    );
  }
}