import 'package:cashier_reserve/common/base/ui.dart';
import 'package:cashier_reserve/common/base/ui_model.dart';
import 'package:cashier_reserve/home/reserve_left_content_view.dart';
import 'package:cashier_reserve/home/reserve_right_content_view.dart';
import 'package:cashier_reserve/home/reserve_view_model.dart';

import '../common/base/provider.dart';

class ReserveView extends BaseUI with TickerProviderStateMixin {
  TabController? tabController;
  late AnimationController animationController;
  late Animation<double> animationSizeFactor;

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

    animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    animationSizeFactor = Tween<double>(begin: 0, end: 1).animate(
      CurveTween(curve: Curves.easeInOut)
          .chain(CurveTween(curve: Curves.decelerate))
          .animate(animationController),
    );
  }

  @override
  void dispose() {
    tabController?.dispose();
    animationController.dispose();
    animationSizeFactor.removeListener(() {});
    super.dispose();
  }

  @override
  Widget buildBody(BuildContext context) {
    ReserveViewModel provider =
        getProvider(context, listen: false) as ReserveViewModel;

    provider.setAnimationController(animationController, animationSizeFactor);

    return SizedBox(
      width: double.infinity,
      child: Column(
        children: [
          _buildTopDateBar(context, provider),
          Expanded(child: _buildContentView(context, provider)),
        ],
      ),
    );
  }

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

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

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

  Widget _buildTopDateBar(BuildContext context, ReserveViewModel provider) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(15, 5, 15, 5),
      child: Row(
        children: [
          _buildDateItem(context, provider),
          _buildDateSelectContent(context, provider),
          const SizedBox(
            width: 15,
          ),
          InkWell(
            onTap: () {
              provider.testCallIncoming();
            },
            child: SizedBox(
              width: 40,
              height: 40,
              child: Center(
                child: Image.asset(
                  "images/reserve/lock.png",
                  width: 24,
                  height: 24,
                ),
              ),
            ),
          ),
          const SizedBox(
            width: 5,
          ),
          InkWell(
            onTap: () { },
            child: SizedBox(
              width: 40,
              height: 40,
              child: Center(
                child: Image.asset(
                  "images/reserve/phone.png",
                  width: 24,
                  height: 24,
                ),
              ),
            ),
          ),
          const SizedBox(
            width: 5,
          ),
          InkWell(
            onTap: () {
              provider.reloadPageData();
            },
            child: const SizedBox(
              width: 40,
              height: 40,
              child: Center(
                child: Text(
                  "刷新",
                  style: TextStyle(fontSize: 15, color: Colors.blue),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildContentView(BuildContext context, ReserveViewModel provider) {
    if ((provider.tableAreaList?.length ?? 0) > 0) {
      if (tabController == null) {
        tabController =
            TabController(vsync: this, length: provider.tableAreaList!.length);
      } else {
        if (tabController!.length != provider.tableAreaList!.length) {
          tabController!.dispose();
          tabController = TabController(
              vsync: this, length: provider.tableAreaList!.length);
        }
      }
    }
    return Row(
      children: [
        ReserveLeftContentView(
          provider: provider,
        ),
        Expanded(
          child: ReserveRightContentView(
            provider: provider,
            tabController: tabController,
          ),
        ),
      ],
    );
  }

  Widget _buildDateItem(BuildContext context, ReserveViewModel provider) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        border: Border.all(color: const Color(0xffafafaf), width: 1),
      ),
      height: 40,
      padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
      child: Row(
        children: [
          Image.asset(
            "images/reserve/date.png",
            width: 24,
            height: 24,
          ),
          const SizedBox(width: 7),
          Text(
            provider.getCurrentDate(),
            style: const TextStyle(color: Color(0xff333333), fontSize: 14),
          )
        ],
      ),
    );
  }

  // Widget _buildCallRecordListWidget(BuildContext context, ReserveViewModel provider) {
  //   return ListView.builder(
  //     itemCount: provider.callRecordList.length,
  //     itemBuilder: (context, index) {
  //       return _buildCallRecordItem(context, provider.callRecordList[index]);
  //     },
  //   );
  // }

  Widget _buildDateSelectContent(
      BuildContext context, ReserveViewModel provider) {
    return Row(
      children: [
        _buildDateSelectItem(
          context,
          provider,
        ),
        _buildDateSelectItem(
          context,
          provider,
          offset: 1,
        ),
        _buildDateSelectItem(
          context,
          provider,
          offset: 2,
        ),
      ],
    );
  }

  Widget _buildDateSelectItem(
    BuildContext context,
    ReserveViewModel provider, {
    int offset = 0,
  }) {
    bool isSelect = provider.selectedDateIndex ~/ 2 == offset;
    bool firstBtnSelect = provider.selectedDateIndex == (offset * 2);
    bool secondBtnSelect = provider.selectedDateIndex == (offset * 2 + 1);

    const double itemHeight = 45;
    const double btnWidth = 60;
    return Container(
        height: itemHeight,
        margin: const EdgeInsets.only(left: 15),
        padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          border: Border.all(
              color:
                  isSelect ? const Color(0xff318AFE) : const Color(0xffafafaf),
              width: 1),
        ),
        child: Row(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  provider.getOffsetDay(offset),
                  style: TextStyle(
                    color: isSelect
                        ? const Color(0xff6A8DC6)
                        : const Color(0xff333333),
                    fontSize: 13,
                  ),
                ),
                Text(
                  provider.getOffsetWeekday(offset),
                  style: TextStyle(
                    color: isSelect
                        ? const Color(0xff6A8DC6)
                        : const Color(0xff333333),
                    fontSize: 13,
                  ),
                ),
              ],
            ),
            const SizedBox(width: 10),
            Container(
              width: 1,
              height: itemHeight,
              color: const Color(0xffafafaf),
            ),
            InkWell(
              onTap: () {
                provider.setSelectedDateIndex(offset * 2);
              },
              child: Container(
                decoration: BoxDecoration(
                  color:
                      firstBtnSelect ? const Color(0xff318AFE) : Colors.white,
                ),
                width: btnWidth,
                child: Center(
                  child: Text(
                    "午餐",
                    style: TextStyle(
                        fontSize: 16,
                        color: firstBtnSelect
                            ? Colors.white
                            : const Color(0xff333333)),
                  ),
                ),
              ),
            ),
            Container(
              width: 1,
              height: itemHeight,
              color: const Color(0xffafafaf),
            ),
            InkWell(
              onTap: () {
                provider.setSelectedDateIndex(offset * 2 + 1);
              },
              child: Container(
                decoration: BoxDecoration(
                  color:
                      secondBtnSelect ? const Color(0xff318AFE) : Colors.white,
                ),
                width: btnWidth,
                child: Center(
                  child: Text(
                    "晚餐",
                    style: TextStyle(
                        fontSize: 16,
                        color: secondBtnSelect
                            ? Colors.white
                            : const Color(0xff333333)),
                  ),
                ),
              ),
            ),
          ],
        ));
  }
}