import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/bloc/curtain_bloc/curtain_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/curtain_bloc/curtain_event.dart';
import 'package:syncrow_app/features/devices/bloc/curtain_bloc/curtain_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/curtains/curtain_buttons.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/generated/assets.dart';

class CurtainView extends StatelessWidget {
  const CurtainView({super.key, required this.curtain});
  final DeviceModel curtain;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => CurtainBloc(curtain.uuid!)..add(InitCurtain()),
      child: BlocBuilder<CurtainBloc, CurtainState>(
        builder: (context, state) {
          double curtainWidth = 270;
          double blindHeight = 310;
          if (state is CurtainsOpening) {
            curtainWidth = state.curtainWidth;
            blindHeight = state.blindHeight;
          } else if (state is CurtainsClosing) {
            curtainWidth = state.curtainWidth;
            blindHeight = state.blindHeight;
          } else if (state is CurtainsPaused) {
            curtainWidth = state.curtainWidth;
            blindHeight = state.blindHeight;
          }
          return DefaultScaffold(
            title: curtain.name,
            child: Column(
              children: [
                Stack(
                  alignment: Alignment.centerLeft,
                  children: [
                    Container(
                      height: 340,
                      width: 365,
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage(
                            Assets.assetsImagesWindow,
                          ),
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(40),
                      child: AnimatedContainer(
                        duration: const Duration(milliseconds: 200),
                        curve: Curves.linear,
                        height: 310,
                        width: curtainWidth,
                        child: Stack(
                          children: List.generate(
                            10, (index) {
                              double spacing = curtainWidth / 9;
                              double leftMostPosition = index * spacing;
                              return AnimatedPositioned(
                                duration: const Duration(milliseconds: 200),
                                curve: Curves.linear,
                                left: leftMostPosition,
                                child: SizedBox(
                                  height: 320,
                                  width: 32,
                                  child: SvgPicture.asset(
                                    Assets.assetsIconsCurtainsIconVerticalBlade,
                                    fit: BoxFit.fill,
                                  ),
                                ),
                              );
                            },
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      top: 27,
                      left: 43,
                      child: SvgPicture.asset(
                        Assets.assetsIconsCurtainsIconCurtainHolder,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 80),
                CurtainButtons(curtain: curtain),
              ],
            ),
          );
        },
      ),
    );
  }
}