import 'package:aman_kassa_flutter/shared/app_colors.dart';
import 'package:aman_kassa_flutter/shared/ui_helpers.dart';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

class PhoneView extends StatefulWidget {
  final bool scaled;
  final int status;

  const PhoneView({this.scaled = false, this.status });

  @override
  _PhoneViewState createState() => _PhoneViewState();
}

class _PhoneViewState extends State<PhoneView> {
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      alignment: Alignment.topCenter,
      transform: Matrix4.translationValues(widget.scaled? ScreenUtil().setHeight(120) : 0.0, widget.scaled? ScreenUtil().setHeight(50) : 0.0, 0)
        ..scale(widget.scaled? ScreenUtil().setSp(0.65) : 1.0)..rotateZ(widget.scaled? ScreenUtil().setSp(-0.2):0.0),
      duration: const Duration(milliseconds: 1500),
      curve: Curves.fastOutSlowIn,
      child: Container(
        width: ScreenUtil().setSp(380.0),
        height: ScreenUtil().setSp(520.0),
        //color: Colors.red.withOpacity(0.1),
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              width: ScreenUtil().setSp(210.0),
              height: ScreenUtil().setSp(430.0),
              decoration: BoxDecoration(
                color: Colors.white
              ),
              child: Center(
                child: AnimatedSwitcher(child: buildContent(), duration: const Duration( milliseconds: 300),),
              ),
            ),
            Image.asset(
              'assets/images/phone_fit.png',
              fit: BoxFit.fitWidth,
              width: ScreenUtil().setSp(260.0),
              height: ScreenUtil().setSp(500.0),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildContent() {
    if(widget.status == 0){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(MdiIcons.timerSand, color: yellowColor,size: ScreenUtil().setSp(90.0),),
          verticalSpaceSmall,
          AutoSizeText('Инициализация', style: TextStyle(fontWeight: FontWeight.bold),)
        ],
      );
    }
    if(widget.status == 1){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            width: ScreenUtil().setSp(80.0),
            height: ScreenUtil().setSp(80.0),
            margin: const EdgeInsets.only(bottom: 8.0),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.white),
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                  image: AssetImage('assets/images/halykpos.png'), fit: BoxFit.fitWidth
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 3), // changes position of shadow
                ),
              ],
            ),
          ),
          verticalSpaceSmall,
          AutoSizeText('Ожидание карты', style: TextStyle(fontWeight: FontWeight.bold),)
        ],
      );
    }
    if(widget.status == 2){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            width: ScreenUtil().setSp(80.0),
            height: ScreenUtil().setSp(80.0),
            margin: const EdgeInsets.only(bottom: 8.0),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.white),
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                  image: AssetImage('assets/images/halykpos.png'), fit: BoxFit.fitWidth
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 3), // changes position of shadow
                ),
              ],
            ),
          ),
          verticalSpaceSmall,
          AutoSizeText('Проверка', style: TextStyle(fontWeight: FontWeight.bold),)
        ],
      );
    }
    if(widget.status == 3){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(MdiIcons.checkBold, color: greenColor,size: ScreenUtil().setSp(90.0),),
          verticalSpaceSmall,
          AutoSizeText('Оплачено', style: TextStyle(fontWeight: FontWeight.bold),)
        ],
      );
    }
    if(widget.status == 4){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(MdiIcons.closeOctagon, color: redColor,size: ScreenUtil().setSp(90.0),),
          verticalSpaceSmall,
          AutoSizeText('Ошибка инициализации', style: TextStyle(fontWeight: FontWeight.bold),)
        ],
      );
    }
    if(widget.status == 5){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(MdiIcons.closeOctagon, color: redColor,size: ScreenUtil().setSp(90.0),),
          verticalSpaceSmall,
          AutoSizeText('Ошибка соединения', style: TextStyle(fontWeight: FontWeight.bold),),
          AutoSizeText('попробуйте еще раз', style: TextStyle(fontWeight: FontWeight.bold),)
        ],
      );
    }
    if(widget.status == 6){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(MdiIcons.closeOctagon, color: redColor,size: ScreenUtil().setSp(90.0),),
          verticalSpaceSmall,
          AutoSizeText('Ошибка авторизации', style: TextStyle(fontWeight: FontWeight.bold),),
        ],
      );
    }

    if(widget.status == 7){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(MdiIcons.closeOctagon, color: redColor,size: ScreenUtil().setSp(90.0),),
          verticalSpaceSmall,
          AutoSizeText('Ошибка чтения карты', style: TextStyle(fontWeight: FontWeight.bold),),
        ],
      );
    }

    if(widget.status == 8){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(MdiIcons.closeOctagon, color: redColor,size: ScreenUtil().setSp(90.0),),
          verticalSpaceSmall,
          AutoSizeText('Ошибка транзакции', style: TextStyle(fontWeight: FontWeight.bold),),
        ],
      );
    }

    if(widget.status == 9){
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(MdiIcons.checkBold, color: greenColor,size: ScreenUtil().setSp(90.0),),
          verticalSpaceSmall,
          AutoSizeText('Возврат транзакции', style: TextStyle(fontWeight: FontWeight.bold),)
        ],
      );
    }

    return Container();
  }
}