import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_event.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_state.dart';
import 'package:syncrow_app/features/devices/view/device_settings/update_note.dart';
import 'package:syncrow_app/features/shared_widgets/default_button.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/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class UpdatePageSetting extends StatelessWidget {
  final String? deviceId;
  const UpdatePageSetting({super.key, this.deviceId});

  @override
  Widget build(BuildContext context) {
    return DefaultScaffold(
        title: 'Device Update',
        child: BlocProvider(
          create: (context) => DeviceSettingBloc(deviceId: deviceId ?? '')
            ..add(const DeviceSettingInitial())
            ..add(const DeviceSettingInitialInfo()),
          child: BlocBuilder<DeviceSettingBloc, DeviceSettingState>(
            builder: (context, state) {
              final _bloc = BlocProvider.of<DeviceSettingBloc>(context);

              return state is DeviceSettingLoadingState
                  ? const Center(
                      child: DefaultContainer(
                          width: 50,
                          height: 50,
                          child: CircularProgressIndicator()),
                    )
                  : RefreshIndicator(
                      onRefresh: () async {},
                      child: Column(
                        children: [
                          DefaultContainer(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(
                                  height: 50,
                                  child: ListTile(
                                      contentPadding: EdgeInsets.zero,
                                      leading: SizedBox(
                                        width: 200,
                                        child: Row(
                                          children: [
                                            Container(
                                              padding: const EdgeInsets.all(10),
                                              decoration: const BoxDecoration(
                                                  color: ColorsManager
                                                      .primaryColor,
                                                  borderRadius:
                                                      BorderRadius.all(
                                                          Radius.circular(50))),
                                              child: SvgPicture.asset(
                                                Assets.checkUpdateIcon,
                                                fit: BoxFit.fill,
                                                height: 25,
                                              ),
                                            ),
                                            const SizedBox(
                                              width: 10,
                                            ),
                                            InkWell(
                                              onTap: () {},
                                              child: const BodyMedium(
                                                text: 'Automatic Update',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      trailing: Container(
                                        width: 100,
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.end,
                                          children: [
                                            BodyMedium(
                                              text: _bloc.enableUpdate
                                                  ? 'true'
                                                  : 'Off',
                                              fontColor: ColorsManager.textGray,
                                            ),
                                            Transform.scale(
                                              scale: .8,
                                              child: CupertinoSwitch(
                                                value: _bloc.enableUpdate,
                                                onChanged: (value) {
                                                  _bloc.add(ToggleUpdateEvent(
                                                      isUpdateEnabled: value));
                                                },
                                                applyTheme: true,
                                              ),
                                            ),
                                          ],
                                        ),
                                      )),
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          const UpdateSosContainerWithProgressBar(
                            sosDescription:
                                'Connectivity Issue Resolved Fixed a bug that caused the SOS button to disconnect from the app intermittently.',
                            sosVersion: 'SOS v2.0.5',
                          ),
                          // const UpdatedContainer(
                          //   sosVersion: 'SOS v1.0.13',
                          //   sosDescription: 'SOS is up to date',
                          // ),

                          // const NewUpdateContainer(
                          //   sosVersion: 'SOS v2.0.5',
                          //   sosDescription:
                          //       'Connectivity Issue Resolved Fixed a bug that caused the SOS button to disconnect from the app intermittently.',
                          // ),
                          const SizedBox(
                            height: 15,
                          ),
                        ],
                      ));
            },
          ),
        ));
  }
}

class UpdatedContainer extends StatelessWidget {
  final String? sosVersion;
  final String? sosDescription;
  const UpdatedContainer({
    this.sosVersion,
    this.sosDescription,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return DefaultContainer(
      height: MediaQuery.of(context).size.height * 0.35,
      child: Padding(
        padding: const EdgeInsets.all(25),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SvgPicture.asset(
                  Assets.emptyUpdateIcon,
                  fit: BoxFit.fill,
                ),
                BodyMedium(
                  text: sosVersion!,
                  fontColor: ColorsManager.primaryTextColor,
                ),
                BodyMedium(
                  text: sosDescription!,
                  fontColor: ColorsManager.blackColor,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class NewUpdateContainer extends StatelessWidget {
  final String? sosVersion;
  final String? sosDescription;
  const NewUpdateContainer({
    this.sosVersion,
    this.sosDescription,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return DefaultContainer(
      height: MediaQuery.of(context).size.height * 0.50,
      child: Padding(
        padding: const EdgeInsets.all(25),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SvgPicture.asset(
                  Assets.emptyUpdateIcon,
                  fit: BoxFit.fill,
                ),
                const BodyMedium(
                  text: 'New Update Available Now!',
                  fontColor: ColorsManager.blueColor,
                ),
                BodyMedium(
                  text: sosVersion!,
                  fontColor: ColorsManager.primaryTextColor,
                ),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.7,
                  child: BodyMedium(
                    text: sosDescription!,
                    fontColor: ColorsManager.textPrimaryColor,
                    textAlign: TextAlign.center,
                  ),
                ),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.6,
                  child: DefaultButton(
                    borderRadius: 25,
                    backgroundColor: ColorsManager.blueColor1,
                    height: 150,
                    onPressed: () {
                      showDialog(
                        context: context,
                        builder: (context) {
                          return UpDateNoteSetting(
                            cancelTab: () {
                              Navigator.of(context).pop();
                            },
                            confirmTab: () {
                              Navigator.of(context).pop();
                            },
                          );
                        },
                      );
                    },
                    child: const BodyMedium(
                      text: 'Update Now',
                      fontColor: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.w700,
                      textAlign: TextAlign.center,
                    ),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class UpdateSosContainerWithProgressBar extends StatelessWidget {
  final String? sosVersion;
  final String? sosDescription;
  const UpdateSosContainerWithProgressBar({
    this.sosVersion,
    this.sosDescription,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DefaultContainer(
          height: MediaQuery.of(context).size.height * 0.50,
          child: Padding(
            padding: const EdgeInsets.all(25),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    SvgPicture.asset(
                      Assets.emptyUpdateIcon,
                      fit: BoxFit.fill,
                    ),
                    const BodyMedium(
                      text: 'New Update Available Now!',
                      fontColor: ColorsManager.blueColor,
                    ),
                    BodyMedium(
                      text: sosVersion!,
                      fontColor: ColorsManager.primaryTextColor,
                    ),
                    SizedBox(
                      width: MediaQuery.of(context).size.width * 0.7,
                      child: BodyMedium(
                        text: sosDescription!,
                        fontColor: ColorsManager.textPrimaryColor,
                        textAlign: TextAlign.center,
                      ),
                    ),
                    LinearPercentIndicator(
                      barRadius: const Radius.circular(10),
                      width: 170.0,
                      animation: true,
                      animationDuration: 1000,
                      lineHeight: 5.0,
                      percent: 0.2,
                      linearStrokeCap: LinearStrokeCap.butt,
                      progressColor: ColorsManager.blueColor1,
                    ),
                    SizedBox(
                      width: MediaQuery.of(context).size.width * 0.7,
                      child: const BodyMedium(
                        text: 'Downloading Update please be patient',
                        fontColor: ColorsManager.textPrimaryColor,
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.7,
          child: const BodyMedium(
            text:
                'Please keep the power of the device connected during the upgrade process.',
            fontColor: ColorsManager.textPrimaryColor,
            textAlign: TextAlign.center,
          ),
        ),
      ],
    );
  }
}
