syncrow-app/lib/features/devices/view/widgets/curtains/curtain_view.dart

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/devices/view/widgets/device_appbar.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.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 = MediaQuery.sizeOf(context).width * 0.6;
          // 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(
            appBar: DeviceAppbar(
              deviceName: curtain!.name!,
              deviceUuid: curtain!.uuid!,
            ),
            title: curtain.name,
            child: state is CurtainLoadingState
                ? const Center(
                    child: DefaultContainer(
                        width: 50,
                        height: 50,
                        child: CircularProgressIndicator()),
                  )
                : RefreshIndicator(
                    onRefresh: () async {
                      BlocProvider.of<CurtainBloc>(context).add(InitCurtain());
                    },
                    child: ListView(
                      children: [
                        const SizedBox(
                          height: 40,
                        ),
                        Stack(
                          alignment: Alignment.center,
                          children: [
                            SvgPicture.asset(
                              Assets.assetsImagesWindow,
                              width: MediaQuery.sizeOf(context).width * 0.85,
                              height: MediaQuery.sizeOf(context).height * 0.4,
                            ),
                            SizedBox(
                              height: MediaQuery.sizeOf(context).height * 0.4,
                              child: Column(
                                children: [
                                  SvgPicture.asset(
                                    Assets.assetsIconsCurtainsIconCurtainHolder,
                                    width:
                                        MediaQuery.sizeOf(context).width * 0.75,
                                  ),
                                  SizedBox(
                                    width:
                                        MediaQuery.sizeOf(context).width * 0.75,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        SizedBox(
                                          width:
                                              MediaQuery.sizeOf(context).width *
                                                  0.025,
                                        ),
                                        AnimatedContainer(
                                          duration:
                                              const Duration(milliseconds: 200),
                                          curve: Curves.linear,
                                          height: MediaQuery.sizeOf(context)
                                                  .height *
                                              0.35,
                                          width:
                                              MediaQuery.sizeOf(context).width *
                                                  0.35,
                                          child: Stack(
                                            children: List.generate(
                                              4,
                                              (index) {
                                                double spacing =
                                                    curtainWidth / 7.5;
                                                double leftMostPosition =
                                                    index * spacing;
                                                return AnimatedPositioned(
                                                  duration: const Duration(
                                                      milliseconds: 200),
                                                  curve: Curves.linear,
                                                  left: leftMostPosition,
                                                  child: SizedBox(
                                                    height: MediaQuery.sizeOf(
                                                                context)
                                                            .height *
                                                        0.35,
                                                    width: MediaQuery.sizeOf(
                                                                context)
                                                            .width *
                                                        0.08,
                                                    child: SvgPicture.asset(
                                                      Assets
                                                          .assetsIconsCurtainsIconVerticalBlade,
                                                      fit: BoxFit.fill,
                                                    ),
                                                  ),
                                                );
                                              },
                                            ),
                                          ),
                                        ),
                                        AnimatedContainer(
                                          duration:
                                              const Duration(milliseconds: 200),
                                          curve: Curves.linear,
                                          height: MediaQuery.sizeOf(context)
                                                  .height *
                                              0.35,
                                          width:
                                              MediaQuery.sizeOf(context).width *
                                                  0.35,
                                          child: Stack(
                                            children: List.generate(
                                              4,
                                              (index) {
                                                double spacing =
                                                    curtainWidth / 7.5;
                                                double rightMostPosition =
                                                    index * spacing;
                                                return AnimatedPositioned(
                                                  duration: const Duration(
                                                      milliseconds: 200),
                                                  curve: Curves.linear,
                                                  right: rightMostPosition,
                                                  child: SizedBox(
                                                    height: MediaQuery.sizeOf(
                                                                context)
                                                            .height *
                                                        0.35,
                                                    width: MediaQuery.sizeOf(
                                                                context)
                                                            .width *
                                                        0.08,
                                                    child: SvgPicture.asset(
                                                      Assets.rightVerticalBlade,
                                                      fit: BoxFit.fill,
                                                    ),
                                                  ),
                                                );
                                              },
                                            ),
                                          ),
                                        ),
                                        SizedBox(
                                          width:
                                              MediaQuery.sizeOf(context).width *
                                                  0.025,
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(height: 80),
                        CurtainButtons(curtain: curtain),
                      ],
                    ),
                  ),
          );
        },
      ),
    );
  }
}