import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.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/mine/valueAddedServices/cloudStorage/cloud_storage_logic.dart';
import 'package:star_lock/mine/valueAddedServices/cloudStorage/cloud_storage_state.dart';
import 'package:star_lock/tools/titleAppBar.dart';

class CloudStoragePage extends StatefulWidget {
  const CloudStoragePage();

  @override
  State<CloudStoragePage> createState() => _CloudStoragePageState();
}

class _CloudStoragePageState extends State<CloudStoragePage> {
  final CloudStorageLogic logic = Get.put(CloudStorageLogic());
  final CloudStorageState state = Get.find<CloudStorageLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TitleAppBar(
        barTitle: '云存储购买'.tr,
        haveBack: true,
        iconColor: Colors.black,
        titleColor: Colors.black,
        backgroundColor: Colors.white,
      ),
      body: SafeArea(
        child: _buildBody(),
      ),
    );
  }

  Widget _buildBody() {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.center,
          colors: [Color(0xFFC5F0E7), Color(0xFFF7F7F7)],
        ),
      ),
      child: Column(
        children: [
          // 购买套餐选项卡
          _buildPurchasePackage()
        ],
      ),
    );
  }

  Widget _buildPurchasePackage() {
    return Container(
      width: 1.sw,
      margin: EdgeInsets.symmetric(
        vertical: 12.h,
        horizontal: 14.w,
      ),
      decoration: BoxDecoration(
        color: const Color(0xFFF7F7F7),
        borderRadius: BorderRadiusDirectional.all(
          Radius.circular(16.r),
        ),
      ),
      child: Column(
        children: [
          _buildTabs(),
          _buildTabContent(),
        ],
      ),
    );
  }

  Widget _buildTabs() {
    return Obx(
      () => Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: List.generate(
          state.tabs.length,
          (int index) => _buildTabItem(index),
        ),
      ),
    );
  }

  Widget _buildTabItem(int index) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          state.selectedIndex.value = index;
        },
        child: Container(
          height: 68.h,
          decoration: BoxDecoration(
            color: _isSelectTabBgColor(index),
            borderRadius: BorderRadiusDirectional.only(
              topStart: Radius.circular(16.r),
              topEnd: Radius.circular(16.r),
            ),
          ),
          child: Center(
            child: Text(
              state.tabs[index],
              style: _isSelectTabTitle(index),
            ),
          ),
        ),
      ),
    );
  }

  TextStyle _isSelectTabTitle(int index) {
    if (state.selectedIndex.value == index) {
      return TextStyle(
        color: const Color(0xFF040404),
        fontWeight: FontWeight.w600,
        fontSize: 28.sp,
      );
    }
    return TextStyle(
      color: const Color(0xFF8F8F8F),
      fontSize: 28.sp,
    );
  }

  Color _isSelectTabBgColor(int index) {
    if (state.selectedIndex.value == index) {
      return Colors.white;
    }
    return const Color(0xFFF7F7F7);
  }

  Widget _buildTabContent() {
    return Container(
      width: 1.sw,
      padding: EdgeInsets.symmetric(
        vertical: 12.h,
        horizontal: 14.w,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      child: Text('asd'),
    );
  }
}