import 'package:cashier_reserve/common/base/provider.dart';
import 'package:cashier_reserve/common/base/ui.dart';
import 'package:cashier_reserve/common/base/ui_model.dart';
import 'package:cashier_reserve/home/home_view_model.dart';
import 'package:cashier_reserve/home/order_view.dart';
import 'package:cashier_reserve/home/order_view_model.dart';
import 'package:cashier_reserve/home/reserve_view.dart';
import 'package:cashier_reserve/home/reserve_view_model.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';

class HomeView extends BaseUI {
  @override
  Widget buildBody(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: Row(
        children: <Widget>[
          _buildLeftBar(context),
          _buildRightContainer(context),
        ],
      ),
    );
  }

  @override
  BaseUIModel getProvider(BuildContext context, {bool listen = true}) {
    return MyProvider.of<HomeViewModel>(context, listen: listen);
  }

  @override
  String? getTitleStr(BuildContext context) {
    return "";
  }

  @override
  AppBar? getAppBar(BuildContext context) {
    return null;
  }

  Widget _buildLeftBar(BuildContext context) {
    HomeViewModel provider =
        getProvider(context, listen: false) as HomeViewModel;
    const double leftBarWidth = 100;
    double itemHeight = (MediaQuery.of(context).size.height -
            leftBarWidth -
            MediaQuery.of(context).padding.top) /
        provider.tabTitles.length;
    return Container(
      color: const Color(0xff1D2227),
      width: leftBarWidth,
      child: SingleChildScrollView(
        child: Column(
          children: _buildDestinations(
            context,
            provider,
            leftBarWidth,
            itemHeight,
          ),
        ),
      ),
    );
  }

  Widget _buildRightContainer(BuildContext context) {
    HomeViewModel provider =
        getProvider(context, listen: false) as HomeViewModel;
    return Expanded(
        child: Container(
      color: Colors.amber,
      child: MultiProvider(
        providers: [
          ChangeNotifierProvider<ReserveViewModel>(
            create: (_) => ReserveViewModel(),
          ),
          ChangeNotifierProvider<OrderViewModel>(
            create: (_) => OrderViewModel(),
          ),
        ],
        child: PageView(
          physics: const NeverScrollableScrollPhysics(),
          controller: provider.pageController,
          children: _buildPageViews(context, provider),
        ),
      ),
    ));
  }

  List<Widget> _buildPageViews(BuildContext context, HomeViewModel provider) {
    List<Widget> items = [];

    items.add(Center(
      child: BaseUIController(stateWidget: ReserveView()),
    ));

    items.add(Center(
      child: BaseUIController(stateWidget: OrderView()),
    ));

    items.add(const Center(
      child: Text("打印预定"),
    ));

    items.add(const Center(
      child: Text("历史订单"),
    ));

    items.add(const Center(
      child: Text("来电"),
    ));

    items.add(const Center(
      child: Text("客户"),
    ));

    items.add(const Center(
      child: Text("消息"),
    ));

    items.add(const Center(
      child: Text("更多"),
    ));

    return items;
  }

  List<Widget> _buildDestinations(BuildContext context, HomeViewModel provider,
      double itemWidth, double itemHeight) {
    List<Widget> items = List.generate(provider.tabTitles.length, (index) {
      return SizedBox(
        height: itemHeight,
        child: InkWell(
          onTap: () {
            provider.setIndex(index);
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset(
                provider.currentIndex == index
                    ? "images/tabbar/${provider.tabIcons[index]}_select.png"
                    : "images/tabbar/${provider.tabIcons[index]}_normal.png",
                width: 20,
                height: 23,
              ),
              const SizedBox(height: 3),
              Text(
                provider.tabTitles[index],
                style: provider.currentIndex == index
                    ? const TextStyle(color: Colors.white, fontSize: 12)
                    : const TextStyle(color: Colors.grey, fontSize: 12),
              )
            ],
          ),
        ),
      );
    });

    Widget topItem = SizedBox(
      width: itemWidth,
      height: itemWidth,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          CircularPercentIndicator(
            animation: true,
            radius: 25.0,
            lineWidth: 4.0,
            percent: 0.3622,
            center: const Text(
              "36%",
              style: TextStyle(fontSize: 15, color: Colors.white),
            ),
            progressColor: Colors.green,
          ),
          const Text("占15空间27",
              style: TextStyle(color: Colors.white, fontSize: 12)),
          const Text("共130人",
              style: TextStyle(color: Colors.white, fontSize: 12)),
          Container(
            margin: const EdgeInsets.only(top: 5),
            width: 80,
            height: 2,
            color: Colors.grey,
          )
        ],
      ),
    );

    // 将顶部的item放到最前面
    items.insert(0, topItem);

    return items;
  }
}