import 'package:fis_measure/interfaces/process/workspace/application.dart';
import 'package:fis_measure/process/primitives/single_straightline.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:fis_theme/theme.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

class SpecialItemHR extends FStatefulWidget {
  const SpecialItemHR({Key? key}) : super(key: key);

  @override
  FState<SpecialItemHR> createState() => _SpecialItemHRState();
}

class _SpecialItemHRState extends FState<SpecialItemHR> {
  final application = Get.find<IApplication>();

  late final item = application.activeMeasureItem!;
  late int selectedIndex = 1;

  FWidget buildHRButton(int index) {
    return FInkWell(
      onTap: () {
        final hRFeature = item.feature as StraightLineHeartRateFeature;
        hRFeature.setHeartRate(index);
        application.updateRenderReady.emit(this, null);
        HapticFeedback.mediumImpact();
        setState(() {
          selectedIndex = index;
        });
      },
      child: FContainer(
        decoration: BoxDecoration(
          color: selectedIndex == index
              ? const Color.fromARGB(255, 101, 211, 71)
              : const Color.fromRGBO(70, 70, 70, 1),
          border: Border.all(color: const Color.fromRGBO(124, 124, 124, 1)),
          borderRadius: BorderRadius.circular(5),
        ),
        // margin: const EdgeInsets.symmetric(horizontal: 11, vertical: 5),
        child: FCenter(
          child: FText(
            index.toString(),
            style: const TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }

  @override
  FWidget build(BuildContext context) {
    const Decoration _webDecoration = BoxDecoration(
      color: Color.fromRGBO(60, 60, 60, 1),
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(5), bottomRight: Radius.circular(5)),
    );
    const Decoration _mobileDecoration = BoxDecoration();
    return FContainer(
      padding: kIsWeb ? const EdgeInsets.only(top: 10, bottom: 5) : null,
      decoration: kIsWeb ? _webDecoration : _mobileDecoration,
      child: FColumn(
        children: [
          if (kIsWeb)
            FContainer(
              padding: const EdgeInsets.symmetric(
                vertical: 6,
              ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                color: FTheme.ins.colorScheme.primary,
              ),
              margin: const EdgeInsets.symmetric(
                horizontal: 11,
              ),
              width: double.infinity,
              child: const FCenter(
                child: FText(
                  'Time',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          _buildHRButtons(),
        ],
      ),
    );
  }

  FWidget _buildHRButtons() {
    return kIsWeb ? _buildWebHRButtons() : _buildMobileHRButtons();
  }

  FWidget _buildWebHRButtons() {
    return FColumn(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        FRow(
          children: const [
            FSizedBox(
              width: 11,
            ),
            FText(
              'Heart Cycle',
              textAlign: TextAlign.start,
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ],
        ),
        FGridView.count(
          shrinkWrap: true,
          crossAxisCount: 2,
          childAspectRatio: 3,
          children: [1, 2, 3, 4, 5].map((e) {
            return buildHRButton(e);
          }).toList(),
        ),
      ],
    );
  }

  FWidget _buildMobileHRButtons() {
    return FExpanded(
      child: FListView(
        children: [
          FColumn(crossAxisAlignment: CrossAxisAlignment.center, children: [
            const FText(
              'Heart Cycle',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 12,
                color: Colors.white,
              ),
            ),
            const FSizedBox(
              height: 5,
            ),
            FGridView.count(
              shrinkWrap: true,
              crossAxisCount: 2,
              childAspectRatio: 1.5,
              mainAxisSpacing: 5,
              crossAxisSpacing: 5,
              children: [1, 2, 3, 4, 5].map((e) {
                return buildHRButton(e);
              }).toList(),
            ),
          ]),
        ],
      ),
    );
  }
}