import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:sk_base_mobile/app_theme.dart';
import 'package:sk_base_mobile/constants/bg_color.dart';
import 'package:sk_base_mobile/util/screen_adaper_util.dart';

class BackColors extends StatelessWidget {
  const BackColors({super.key});
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.sizeOf(context);
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(top: ScreenAdaper.height(30)),
      child: Stack(
        children: [
          Positioned(
              top: ScreenAdaper.height(100),
              child: Container(
                height: ScreenAdaper.height(size.height) * 0.5,
                width: ScreenAdaper.width(size.width) * 0.5,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.centerRight,
                        colors: [
                          lightOrange.withOpacity(.0),
                          lightOrange.withOpacity(.1),
                          lightOrange.withOpacity(.2),
                          lightOrange.withOpacity(.3),
                          lightOrange.withOpacity(.4),
                          lightOrange.withOpacity(.4),
                          lightOrange.withOpacity(.3),
                          lightOrange.withOpacity(.2),
                          lightOrange.withOpacity(.1),
                          lightOrange.withOpacity(0),
                        ])),
              )),
          Positioned(
              top: ScreenAdaper.height(100),
              right: ScreenAdaper.width(-50),
              child: Container(
                height: ScreenAdaper.height(size.height) * 0.5,
                width: ScreenAdaper.width(size.width) * 0.3,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.centerRight,
                        colors: [
                          lightOrange.withOpacity(.0),
                          lightOrange.withOpacity(.1),
                          lightOrange.withOpacity(.2),
                          lightOrange.withOpacity(.3),
                          lightOrange.withOpacity(.2),
                          lightOrange.withOpacity(.1),
                          lightOrange.withOpacity(0),
                        ])),
              )),
          Positioned(
              bottom: ScreenAdaper.height(100),
              right: ScreenAdaper.width(-50),
              child: Container(
                height: ScreenAdaper.height(size.height) * 0.5,
                width: ScreenAdaper.width(size.width) * 0.6,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.centerRight,
                        colors: [
                          lightAccentBlue.withOpacity(.0),
                          lightAccentBlue.withOpacity(.1),
                          lightAccentBlue.withOpacity(.2),
                          lightAccentBlue.withOpacity(.3),
                          lightAccentBlue.withOpacity(.4),
                          lightAccentBlue.withOpacity(.4),
                          lightAccentBlue.withOpacity(.3),
                          lightAccentBlue.withOpacity(.2),
                          lightAccentBlue.withOpacity(.1),
                          lightAccentBlue.withOpacity(0),
                        ])),
              )),
          Positioned(
              bottom: ScreenAdaper.height(-60),
              child: Container(
                height: ScreenAdaper.height(size.height) * 0.3,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.centerRight,
                        colors: [
                          lightAccentBlue.withOpacity(.0),
                          lightAccentBlue.withOpacity(.1),
                          lightAccentBlue.withOpacity(.2),
                          lightAccentBlue.withOpacity(.3),
                          lightAccentBlue.withOpacity(.4),
                          lightAccentBlue.withOpacity(.4),
                          lightAccentBlue.withOpacity(.3),
                          lightAccentBlue.withOpacity(.2),
                          lightAccentBlue.withOpacity(.1),
                          lightAccentBlue.withOpacity(0),
                        ])),
              )),
          Positioned(
              bottom: 1,
              left: 1,
              top: !ScreenAdaper.isLandspace()
                  ? ScreenAdaper.height(160)
                  : ScreenAdaper.height(220),
              right: 1,
              child: Container(
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.centerRight,
                        colors: [
                          for (var i = 0; i <= 4; i += 1)
                            AppTheme.primaryColorLight.withOpacity(i * 0.1),
                          for (var i = 4; i >= 0; i -= 1)
                            AppTheme.primaryColorLight.withOpacity(i * 0.1),
                        ])),
              )),
          Positioned(
              bottom: 1,
              right: 1,
              child: Container(
                height: ScreenAdaper.height(size.height) * 0.3,
                width: ScreenAdaper.width(size.width) * 0.6,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.centerRight,
                        colors: [
                          for (var i = 0; i <= 4; i += 1)
                            AppTheme.secondPrimaryColorLight
                                .withOpacity(i * 0.1),
                          for (var i = 4; i >= 0; i -= 1)
                            AppTheme.secondPrimaryColorLight
                                .withOpacity(i * 0.1),
                        ])),
              )),
          Positioned.fill(
              child: BackdropFilter(
            filter: ImageFilter.blur(
                sigmaY: ScreenAdaper.height(30),
                sigmaX: ScreenAdaper.width(30)),
            child: const SizedBox(),
          )),
        ],
      ),
    );
  }
}