import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/app_settings/app_colors.dart';
import 'package:star_lock/main/lockDetail/electronicKey/sendElectronicKey/sendElectronicKey/sendElectronicKey_logic.dart';
import 'package:star_lock/main/lockDetail/electronicKey/sendElectronicKey/sendElectronicKey/sendElectronicKey_state.dart';
import 'package:star_lock/main/lockDetail/electronicKey/sendElectronicKey/sendElectronicKey/view/sendElectronicKeyView_page.dart';

import '../../../../../tools/CustomUnderlineTabIndicator.dart';
import '../../../../../tools/titleAppBar.dart';
import '../../../../../translations/trans_lib.dart';

class SendElectronicKeyPage extends StatefulWidget {
  const SendElectronicKeyPage({Key? key}) : super(key: key);

  @override
  State<SendElectronicKeyPage> createState() => _SendElectronicKeyPageState();
}

class _SendElectronicKeyPageState extends State<SendElectronicKeyPage>
    with SingleTickerProviderStateMixin {
  final SendElectronicKeyLogic logic = Get.put(SendElectronicKeyLogic());
  final SendElectronicKeyState state = Get.find<SendElectronicKeyLogic>().state;

  @override
  void initState() {
    super.initState();
    state.tabController =
        TabController(vsync: this, length: _itemTabs.length, initialIndex: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.mainBackgroundColor,
      appBar: TitleAppBar(
          barTitle: TranslationLoader.lanKeys!.sendKey!.tr,
          haveBack: true,
          backgroundColor: AppColors.mainColor),
      body: Column(
        children: <Widget>[
          _tabBar(),
          _pageWidget(),
        ],
      ),
    );
  }

  TabBar _tabBar() {
    return TabBar(
      controller: state.tabController,
      onTap: (int index) {
        FocusScope.of(context).requestFocus(FocusNode());
      },
      tabs: _itemTabs.map(_tab).toList(),
      isScrollable: true,
      indicatorColor: Colors.red,
      unselectedLabelColor: Colors.black,
      unselectedLabelStyle: TextStyle(
        color: AppColors.mainColor,
        fontSize: 24.sp,
      ),
      automaticIndicatorColorAdjustment: true,
      labelColor: AppColors.mainColor,
      labelStyle: TextStyle(
          color: AppColors.mainColor,
          fontSize: 24.sp,
          fontWeight: FontWeight.w600),
      indicator: CustomUnderlineTabIndicator(
          borderSide: BorderSide(color: AppColors.mainColor, width: 4.w),
          strokeCap: StrokeCap.round,
          width: 30.w),
    );
  }

  Tab _tab(ItemView item) {
    return Tab(
      child: Container(
        margin: EdgeInsets.all(10.w),
        child: Text(
          item.title,
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

  Widget _pageWidget() {
    return Expanded(
      child: TabBarView(
          controller: state.tabController,
          children: _itemTabs
              .map((ItemView item) => SendElectronicKeyView(
                    type: item.type,
                  ))
              .toList()),
    );
  }

  final List<ItemView> _itemTabs = <ItemView>[
    ItemView(title: TranslationLoader.lanKeys!.timeLimit!.tr, type: '0'),
    ItemView(title: TranslationLoader.lanKeys!.permanent!.tr, type: '1'),
    ItemView(title: TranslationLoader.lanKeys!.once!.tr, type: '2'),
    ItemView(title: TranslationLoader.lanKeys!.circulation!.tr, type: '3'),
  ];
}

class ItemView {
  const ItemView({required this.title, required this.type});

  final String title;
  final String type;
}