import 'package:chat/generated/i18n.dart';
import 'package:chat/utils/screen.dart';
import 'package:chat/utils/sp_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../data/constants.dart';
import 'IndexPage.dart';

class SplashPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return SplashPageState();
  }
}

class SplashBean {
  String icon;
  String title;
  String content;
  Color titleColor;

  SplashBean(this.icon, this.title, this.content, this.titleColor);
}

class SplashPageState extends State<SplashPage> {
  List<SplashBean> list = [];

  int currentIndex = 0;
  PageController pageController;

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

    list.add(SplashBean(
        'assets/images/img_splash_1.png',
        I18n.of(Constants.getCurrentContext()).splash_tips1,
        I18n.of(Constants.getCurrentContext()).splash_tips_content1,
        Color(0xffEC527D)));
    list.add(SplashBean(
        'assets/images/img_splash_2.png',
        I18n.of(Constants.getCurrentContext()).splash_tips2,
        I18n.of(Constants.getCurrentContext()).splash_tips_content2,
        Color(0xffB439EB)));
    list.add(SplashBean(
        'assets/images/img_splash_3.png',
        I18n.of(Constants.getCurrentContext()).splash_tips3,
        I18n.of(Constants.getCurrentContext()).splash_tips_content3,
        Color(0xff2B79F7)));

    pageController = PageController(
      initialPage: 0,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: SafeArea(
            child: Container(
          color: Colors.white,
          child: Stack(
            children: <Widget>[
              PageView.builder(
                controller: pageController,
                itemBuilder: _buildItem,
                itemCount: list.length,
                onPageChanged: (int index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
              ),
              Container(
                child: Column(
                  children: <Widget>[
                    Expanded(child: Container()),
                    currentIndex != 2 ? getIndicator() : Container(),
                    currentIndex == 2
                        ? InkWell(
                            onTap: () async {
                              await SPUtils.saveBool(
                                  Constants.Splash_OPENED, true);
                              Navigator.of(context).push(
                                MaterialPageRoute(
                                  builder: (_) => IndexPage(),
                                ),
                              );
                            },
                            child: Padding(
                              padding: EdgeInsets.only(bottom: 40),
                              child: Container(
                                padding: EdgeInsets.only(
                                    left: 16, right: 16, top: 5, bottom: 5),
                                decoration: BoxDecoration(
                                    border: Border.all(
                                        color: Color(0xff2B79F7), width: 1),
                                    borderRadius: BorderRadius.circular(16)),
                                child: Text(
                                  I18n.of(context).splash_go,
                                  textScaleFactor: 1.0,
                                  style: TextStyle(
                                      fontSize: 18, color: Color(0xff2B79F7)),
                                ),
                              ),
                            ),
                          )
                        : Container(),
                  ],
                ),
              )
            ],
          ),
        )),
      ),
    );
  }

  Widget getIndicator() {
    List<Widget> pointList = [];
    for (int k = 0; k < list.length; k++) {
      pointList.add(Padding(
        padding: EdgeInsets.only(left: 6, right: 6),
        child: ClipOval(
          child: Container(
            color: k == currentIndex ? Color(0xff2B79F7) : Color(0xffBFBEBE),
            width: 10,
            height: 10,
          ),
        ),
      ));
    }

    return Padding(
      padding: EdgeInsets.only(bottom: 40),
      child: Container(
        width: Screen.width,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: pointList,
        ),
      ),
    );
  }

  Widget _buildItem(BuildContext context, int index) {
    SplashBean data = list[index];
    return Container(
      child: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 30, bottom: 40),
            child: Image.asset(
              data.icon,
              height: 400,
            ),
          ),
          Text(
            data.title,
            textScaleFactor: 1.0,
            style: TextStyle(color: data.titleColor, fontSize: 30),
          ),
          SizedBox(
            height: 6,
          ),
          Text(data.content,
              textScaleFactor: 1.0,
              style: TextStyle(color: Color(0xff999999), fontSize: 15)),
        ],
      ),
    );
  }
}