import 'dart:io';

import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/home/huixiang_brand_page.dart';
import 'package:huixiang/home/main_home_page.dart';
import 'package:huixiang/mine/mine_page.dart';
import 'package:huixiang/union/union_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPage();
  }
}

class _MainPage extends State<MainPage> {
  List<Widget> _widgetOptions;
  List<String> texts = [
    S.current.pinpai,
    S.current.main_menu1,
    S.current.main_menu2,
    S.current.main_menu3,
  ];
  List<String> icons;
  List<String> iconn;

  @override
  void initState() {
    super.initState();
    _widgetOptions = <Widget>[
      BrandPage(),
      MainHomePage(),
      UnionPage(),
      MinePage(),
    ];

    icons = [
      "assets/image/icon_brand_s.png",
      "assets/image/icon_bi_s.png",
      "assets/image/icon_meng_s.png",
      "assets/image/icon_wo_s.png",
    ];
    iconn = [
      "assets/image/icon_brand_n.png",
      "assets/image/icon_bi_n.png",
      "assets/image/icon_meng_n.png",
      "assets/image/icon_wo_n.png",
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.only(bottom: 76),
        child: Center(
          child: _widgetOptions.elementAt(clickIndex),
        ),
      ),
      extendBody: true,
      bottomNavigationBar: Container(
        alignment: Platform.isAndroid ? Alignment.center : Alignment.topCenter,
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 2),
                blurRadius: 4,
                spreadRadius: 0)
          ],
          borderRadius: BorderRadius.only(topRight: Radius.circular(4), topLeft: Radius.circular(4))
        ),
        height: 82.h,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            bottomNavigationBigItem(0),
            bottomNavigationItem(1),
            bottomNavigationItem(2),
            bottomNavigationItem(3),
          ],
        ),
      ),
    );
  }

  var clickIndex = 0;

  Widget bottomNavigationItem(index) {
    var isSelected = index == clickIndex;
    return Expanded(
      child: InkWell(
        onTap: () {
          setState(() {
            clickIndex = index;
          });
        },
        child: Container(
          width: 45.w,
          height: 45.h,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              AnimatedCrossFade(
                firstChild: Image.asset(
                  icons[index],
                  width: 30,
                  height: 30,
                  fit: BoxFit.contain,
                ),
                secondChild: Image.asset(
                  iconn[index],
                  width: 30,
                  height: 30,
                  fit: BoxFit.contain,
                ),
                crossFadeState: isSelected
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                duration: Duration(milliseconds: 200),
              ),
              Text(
                texts[index],
                style: TextStyle(
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF4C4C4C)),
              ),
            ],
          ),
        ),
      ),
      flex: 1,
    );
  }

  Widget bottomNavigationBigItem(index) {
    var isSelected = index == clickIndex;
    return Expanded(
      child: InkWell(
        onTap: () {
          _onItemTapped(index);
        },
        child: Container(
          width: 45.w,
          height: 45.h,
          alignment: Alignment.center,
          child: AnimatedCrossFade(
            firstCurve: Curves.easeIn,
            secondCurve: Curves.ease,
            sizeCurve: Curves.easeInOut,
            firstChild: Image.asset(
              icons[index],
              width: 45,
              height: 45,
              fit: BoxFit.contain,
            ),
            secondChild: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  iconn[index],
                  width: 30,
                  height: 30,
                  fit: BoxFit.contain,
                ),
                Text(
                  texts[index],
                  style: TextStyle(
                      fontSize: 10,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFF4C4C4C)),
                ),
              ],
            ),
            crossFadeState: isSelected
                ? CrossFadeState.showFirst
                : CrossFadeState.showSecond,
            duration: Duration(milliseconds: 200),
          ),
        ),
      ),
      flex: 1,
    );
  }

  //BottomNavigationBarItem(
  //             label: S.of(context).main_menu1,
  //
  //             icon: Image(
  //               image: AssetImage("assets/image/icon_bi_n.png"),
  //             ),
  //             activeIcon: Image(
  //               image: AssetImage("assets/image/icon_bi_s.png"),
  //             ),
  //           ),
  //           BottomNavigationBarItem(
  //             label: S.of(context).main_menu2,
  //             icon: Image(
  //               image: AssetImage("assets/image/icon_meng_n.png"),
  //             ),
  //             activeIcon: Image(
  //               image: AssetImage("assets/image/icon_meng_s.png"),
  //             ),
  //           ),
  //           BottomNavigationBarItem(
  //             label: S.of(context).main_menu3,
  //             icon: Image(
  //               image: AssetImage("assets/image/icon_wo_n.png"),
  //             ),
  //             activeIcon: Image(
  //               image: AssetImage("assets/image/icon_wo_s.png"),
  //             ),
  //           )

  void _onItemTapped(int index) {
    setState(() {
      clickIndex = index;
    });
  }
}