import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/strings_manager.dart';

class LightInterfaceRecentColor extends StatelessWidget {
  const LightInterfaceRecentColor({
    super.key,
    required this.light,
  });

  final DeviceModel light;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        BodyMedium(
          text: StringsManager.recentlyUsed,
          style: context.bodyMedium.copyWith(color: Colors.grey),
        ),
        const SizedBox(height: 10),
        FittedBox(
          child: Row(
            children: [
              ...List.generate(
                // light.recentColors.length > 4 ? 4 : light.recentColors.length,
                4,
                (index) => InkWell(
                  // onTap: () {
                  //   DevicesCubit.getInstance()
                  //       .setColor(light, light.recentColors[index]);
                  // },
                  child: Container(
                    margin: const EdgeInsets.only(right: 10),
                    width: 40,
                    height: 40,
                    decoration: const ShapeDecoration(
                      shape: CircleBorder(),
                      // color: Color(light.recentColors[index]),
                    ),
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(right: 10),
                width: 1,
                height: 30,
                color: ColorsManager.greyColor,
              ),
              SvgPicture.asset(
                Assets.assetsIconsKalvin,
                height: 40,
                width: 40,
              ),
              const SizedBox(
                width: 10,
              ),
              SvgPicture.asset(
                Assets.assetsIconsColorWheel,
                height: 40,
                width: 40,
              ),
            ],
          ),
        ),
        const SizedBox(height: 10),
      ],
    );
  }
}
