import 'package:cashier_reserve/common/base/ui.dart';
import 'package:cashier_reserve/common/base/ui_model.dart';
import 'package:cashier_reserve/common/channel/call_log_model.dart';
import 'package:cashier_reserve/common/print/print.dart';
import 'package:cashier_reserve/home/reserve_view_model.dart';

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

class ReserveView extends BaseUI {
  @override
  Widget buildBody(BuildContext context) {
    ReserveViewModel provider =
        getProvider(context, listen: false) as ReserveViewModel;
    return 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: () {},
            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.loadCallLog();
            },
            child: const SizedBox(
              width: 40,
              height: 40,
              child: Center(
                child: Text(
                  "刷新",
                  style: TextStyle(fontSize: 15, color: Colors.blue),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildContentView(BuildContext context, ReserveViewModel provider) {
    return Row(
      children: [
        _buildLeftContent(context, provider),
        Expanded(child: _buildRightContent(context, provider)),
      ],
    );
  }

  Widget _buildLeftContent(BuildContext context, ReserveViewModel provider) {
    yjPrint("callLogs length: ${provider.callLogs?.length}");
    return Column(
      children: [
        Expanded(
            child: SizedBox(
          width: 430,
          child: ListView.builder(
            itemCount: provider.callLogs?.length ?? 0,
            itemBuilder: (context, index) {
              return _buildCallRecordItem(context, provider.callLogs?[index]);
            },
          ),
        )),
        Container(
          padding: const EdgeInsets.fromLTRB(20, 10, 20, 15),
          child: InkWell(
            onTap: () {},
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: const Color(0xff318AFE),
              ),
              width: 300,
              height: 36,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Image.asset(
                    'images/reserve/create.png',
                    width: 20,
                    height: 20,
                  ),
                  const SizedBox(
                    width: 5,
                  ),
                  const Text(
                    "创建订单",
                    style: TextStyle(color: Colors.white, fontSize: 14),
                  ),
                ],
              ),
            ),
          ),
        )
      ],
    );
  }

  Widget _buildRightContent(BuildContext context, ReserveViewModel provider) {
    return Container();
  }

  /// _buildCallRecordItem 通话记录item
  Widget _buildCallRecordItem(BuildContext context, CallLogModel? model) {
    return Container(
      padding: const EdgeInsets.fromLTRB(15, 15, 15, 5),
      child: Column(
        children: [
          Row(
            children: [
              Column(
                children: [
                  Image.asset(
                    (model?.type ?? 0) == 3
                        ? "images/reserve/phone_fail.png"
                        : "images/reserve/phone_suc.png",
                    width: 24,
                    height: 24,
                  ),
                  const SizedBox(height: 2),
                  Text(
                    model?.time ?? "",
                    style:
                        const TextStyle(color: Color(0xff999999), fontSize: 12),
                  ),
                ],
              ),
              const SizedBox(width: 10),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    model?.name ?? "未知电话",
                    style:
                        const TextStyle(color: Color(0xff333333), fontSize: 14),
                  ),
                  const SizedBox(height: 5),
                  Row(
                    children: [
                      Text(
                        model?.number ?? "",
                        style: const TextStyle(
                            color: Color(0xff333333), fontSize: 14),
                      ),
                      const SizedBox(
                        width: 15,
                      ),
                      const Text(
                        "已消费0单",
                        style:
                            TextStyle(color: Color(0xff333333), fontSize: 14),
                      ),
                      const SizedBox(
                        width: 15,
                      ),
                      const Text(
                        "已撤0单",
                        style:
                            TextStyle(color: Color(0xff333333), fontSize: 14),
                      ),
                    ],
                  ),
                ],
              ),
              const Expanded(child: SizedBox()),
              InkWell(
                onTap: () {},
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    border:
                        Border.all(color: const Color(0xff318AFE), width: 1),
                  ),
                  padding: const EdgeInsets.fromLTRB(20, 7, 20, 7),
                  child: const Text(
                    "处理",
                    style: TextStyle(color: Color(0xff318AFE), fontSize: 14),
                  ),
                ),
              )
            ],
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            height: 1,
            color: const Color(0xffededed),
          ),
        ],
      ),
    );
  }

  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,
            day: provider.getOffsetDay(0),
            week: provider.getOffsetWeekday(0),
            isToday: true),
        _buildDateSelectItem(context,
            day: provider.getOffsetDay(1), week: provider.getOffsetWeekday(1)),
        _buildDateSelectItem(context,
            day: provider.getOffsetDay(2), week: provider.getOffsetWeekday(2)),
      ],
    );
  }

  Widget _buildDateSelectItem(
    BuildContext context, {
    String day = "",
    String week = "",
    isToday = false,
  }) {
    const double itemHeight = 45;
    const double btnWidth = 60;
    return Container(
        height: itemHeight,
        margin: const EdgeInsets.only(left: 15),
        padding: const EdgeInsets.fromLTRB(10, 0, 6, 0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          border: Border.all(
              color:
                  isToday ? const Color(0xff318AFE) : const Color(0xffafafaf),
              width: 1),
        ),
        child: Row(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  day,
                  style: TextStyle(
                    color: isToday
                        ? const Color(0xff6A8DC6)
                        : const Color(0xff333333),
                    fontSize: 13,
                  ),
                ),
                Text(
                  week,
                  style: TextStyle(
                    color: isToday
                        ? const Color(0xff6A8DC6)
                        : const Color(0xff333333),
                    fontSize: 13,
                  ),
                ),
              ],
            ),
            const SizedBox(width: 10),
            Container(
              width: 1,
              height: itemHeight,
              color: const Color(0xffafafaf),
            ),
            InkWell(
              onTap: () {},
              child: const SizedBox(
                width: btnWidth,
                child: Center(
                  child: Text(
                    "午餐",
                    style: TextStyle(fontSize: 16, color: Color(0xff333333)),
                  ),
                ),
              ),
            ),
            Container(
              width: 1,
              height: itemHeight,
              color: const Color(0xffafafaf),
            ),
            InkWell(
              onTap: () {},
              child: const SizedBox(
                width: btnWidth,
                child: Center(
                  child: Text(
                    "晚餐",
                    style: TextStyle(fontSize: 16, color: Color(0xff333333)),
                  ),
                ),
              ),
            ),
          ],
        ));
  }
}