import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'settings_panel_frame.dart';

class SettingsSideMenu extends StatelessWidget {
  const SettingsSideMenu({
    super.key,
    required this.selectedMenu,
    required this.onSelected,
  });

  final String selectedMenu;
  final ValueChanged<String> onSelected;

  static const List<String> menus = [
    '关于本机',
    '远程控制',
    '软件更新',
    '客户服务',
    '出厂设置',
  ];

  @override
  Widget build(BuildContext context) {
    return SettingsPanelFrame(
      backgroundAsset: settingsAssetPanelLeft,
      padding: EdgeInsets.fromLTRB(42.w, 48.h, 42.w, 48.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '软件设置',
            style: TextStyle(
              color: Colors.white,
              fontSize: 30.sp,
              fontWeight: FontWeight.w700,
            ),
          ),
          SizedBox(height: 34.h),
          Divider(color: const Color(0xFF4CA7D2).withValues(alpha: 0.42)),
          SizedBox(height: 30.h),
          for (final menu in menus) ...[
            _SettingsMenuButton(
              text: menu,
              active: menu == selectedMenu,
              onTap: () => onSelected(menu),
            ),
            SizedBox(height: 22.h),
          ],
        ],
      ),
    );
  }
}

class _SettingsMenuButton extends StatelessWidget {
  const _SettingsMenuButton({
    required this.text,
    required this.active,
    required this.onTap,
  });

  final String text;
  final bool active;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: onTap,
      child: Container(
        height: 64.h,
        padding: EdgeInsets.symmetric(horizontal: 28.w),
        decoration: settingsButtonDecoration(active: active),
        child: Row(
          children: [
            Expanded(
              child: Text(
                text,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: active ? const Color(0xFFC9F8FF) : Colors.white,
                  fontSize: 30.sp,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
            Text(
              '》》',
              style: TextStyle(
                color: const Color(0xFF67C9F5)
                    .withValues(alpha: active ? 0.72 : 0.36),
                fontSize: 28.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
