import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/mine/mineSet/amazon_alexa/amazon_alexa_logic.dart';
import 'package:star_lock/mine/mineSet/amazon_alexa/amazon_alexa_state.dart';
import '../../../../app_settings/app_colors.dart';
import '../../../../tools/titleAppBar.dart';

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

  @override
  State<AmazonAlexaPage> createState() => _AmazonAlexaPageState();
}

class _AmazonAlexaPageState extends State<AmazonAlexaPage> {
  final TextStyle _titleStyle = TextStyle(
    color: Colors.black,
    fontSize: 26.sp,
    fontWeight: FontWeight.w500,
  );

  final TextStyle _descriptionStyle = TextStyle(
    color: AppColors.darkGrayTextColor,
    fontSize: 20.sp,
  );

  final EdgeInsets _contentPadding =
      EdgeInsets.symmetric(horizontal: 20.w, vertical: 20.h);
  final AmazonAlexaLogic logic = Get.put(AmazonAlexaLogic());
  final AmazonAlexaState state = Get.find<AmazonAlexaLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.mainBackgroundColor,
      resizeToAvoidBottomInset: false,
      appBar: TitleAppBar(
        barTitle: 'Amazon Alexa'.tr,
        haveBack: true,
        backgroundColor: AppColors.mainColor,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildTopWidget(),
            SizedBox(height: 20.h),
            _buildBottomWidget(),
          ],
        ),
      ),
    );
  }

  Widget _buildTopWidget() {
    return Container(
      color: Colors.white,
      width: ScreenUtil().screenWidth,
      padding: EdgeInsets.symmetric(vertical: 45.h),
      child: Column(
        children: [
          Image.asset(
            'images/mine/icon_mine_amazon.png',
            width: 78.w,
            height: 78.w,
          ),
          SizedBox(height: 30.h),
          Text('Amazon Alexa'.tr, style: _titleStyle),
          Obx(() => Text(
                '(Skill name: ${state.amazonAlexaData.value.skillName ?? ''})',
                style: _descriptionStyle,
                textAlign: TextAlign.center,
              )),
          SizedBox(height: 10.h),
          Text(
            '您可以使用Alexa进行开锁、闭锁和查看锁状态'.tr,
            style: _descriptionStyle,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  Widget _buildBottomWidget() {
    return Container(
      color: Colors.white,
      width: ScreenUtil().screenWidth,
      padding: _contentPadding,
      child: Column(
        children: [
          _buildInfoSection(
              '支持的国家'.tr, '${state.amazonAlexaData.value.langs?.join('、')}'),
          SizedBox(height: 20.h),
          _buildInfoSection('操作流程'.tr, '操作流程值'.tr),
        ],
      ),
    );
  }

  Widget _buildInfoSection(String title, String content) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Icon(Icons.radio_button_checked_outlined,
                color: AppColors.mainColor),
            SizedBox(width: 6.w),
            Text(title.tr, style: TextStyle(fontSize: 20.sp)),
          ],
        ),
        Container(
          margin: EdgeInsets.only(top: 10.h, left: 10.w),
          padding: EdgeInsets.all(10.w),
          decoration: BoxDecoration(
            color: AppColors.lightBlueBgColor,
            borderRadius: BorderRadius.circular(6),
          ),
          child: Text(content.tr, style: TextStyle(fontSize: 20.sp)),
        ),
      ],
    );
  }
}