redSwitch.kt

package com.example.redswitch

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalSharedTransitionApi
import androidx.compose.animation.animateBounds
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.scaleIn
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.PathMeasure
import androidx.compose.ui.layout.LookaheadScope
import androidx.compose.ui.unit.dp
import kotlin.io.path.Path

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun RedSwitch(modifier: Modifier = Modifier) {


    // so what we want a real type looking switch so it has a shadow and some color let's see
val orange = Color(0xFFE76B13)
val black = Color(0xFF5C1303)
var switchOff by remember { mutableStateOf(false) }


    val c1 by animateColorAsState(
        targetValue = if (switchOff) Color(0xFF951711) else Color(0xFFCB170E)
    )
    val c2 by animateColorAsState(
        targetValue = if (switchOff) Color(0xFFF93D0A) else Color(0xFFE18A00)
    )
    val c3 by animateColorAsState(
        targetValue = if (switchOff) Color(0xFF613D05) else Color(0xFFF93D0A)
    )

    val c4 by animateColorAsState(
        targetValue = if (switchOff) Color(0xFF78110C) else Color.White
    )

    // if (switchOff) Color(0xFFF15423) else Color(0xFFFEA707)
    val glow by animateColorAsState(
        targetValue = if (switchOff )Color(0xFFF15423) else Color(0xFFFEA707)
    )

    // if (switchOff)Color(0xFF87210D) else Color(0xFFF12C07)

    val outerGlow by animateColorAsState(
        targetValue = if (switchOff) Color(0xFF87210D) else Color(0xFFF12C07)
    )

//    top = if (switchOff) 75.dp else 24.dp,
//    bottom = if (switchOff) 24.dp else 75.dp

    val canvasTopPadding by animateDpAsState(
        targetValue = if (switchOff) 75.dp else 24.dp
    )
    val canvasBottomPadding by animateDpAsState(
        targetValue = if (switchOff) 24.dp else 75.dp
    )
    // screen container
   Box(
       modifier = modifier
           .fillMaxSize()
           .clickable(
               indication = null,
               interactionSource = remember { MutableInteractionSource() },
               onClick = {
                   switchOff = !switchOff
               }),
       contentAlignment = Alignment.Center
   ) {
       // shadow box  & sizing
       Box(
           contentAlignment = Alignment.Center,
           modifier = modifier
               .size(
                   width = 150.dp, height = 350.dp
               )

               .dropShadow(
                   shape = RoundedCornerShape(16.dp), block = {
                       // alpha = 0.5f
                       spread = 15f
                       radius = 40f
                       brush = Brush.verticalGradient(
                           colors = listOf(
                               Color.Transparent, Color(0xFF332D36)
                           )
                       )
                   })
               .background(
                   color = Color.White, shape = RoundedCornerShape(16.dp)
               )
       ){
           /// box for the border like a separator from outer box
          Box(
              contentAlignment = Alignment.Center,
              modifier = modifier
                  .fillMaxSize()
                  .padding(4.dp)
                  .border(
                      shape = RoundedCornerShape(16.dp), width = 10.dp, color = Color(0xFFD8D8D8)
                  )
          ){
              Box(
                  contentAlignment = Alignment.Center,
                  modifier = modifier
                      .fillMaxSize()
                      .background(
                          color = Color.Black, shape = RoundedCornerShape(16.dp)
                      )
              ){
                  // background of the switch // blur ofv
                  Box(
                      contentAlignment = Alignment.Center,
                    modifier = modifier
                        .padding(16.dp)
                        .fillMaxSize()
                        .clip(RoundedCornerShape(4.dp))
                        .blur(radius = 10.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
                        .background(
                            shape = RoundedCornerShape(4.dp), brush = Brush.horizontalGradient(
                                colors = listOf(
                                    Color(0xFF5C1303), Color(0xFFE76B13), Color(0xFF5C1303)
                                )
                            )
                        )
                  ) {

                  }
             // drawing the circle to achive the glow effect
                  Canvas(
                      modifier = modifier
                          .fillMaxSize()
                          .blur(10.dp)
                  ) {
                      drawCircle(
                         color = outerGlow,
                          radius = 140f,
                          center = center
                      )
                  }
                  Canvas(
                      modifier = modifier
                          .fillMaxSize()
                          .blur(10.dp)
                  ) {
                      drawCircle(
                          color = glow,
                          radius = 80f,
                          center = center
                      )
                  }


                 if (switchOff){
                     Box(
                         modifier = modifier
                             .size(100.dp)
                             .blur(10.dp)
                             .padding(
                                 bottom = 36.dp, top = 20.dp
                             )

                             .align(Alignment.TopCenter)
                             .background(
                                 brush = Brush.verticalGradient(
                                     colors = listOf(
                                         Color(0xFFE03402), Color.Black,
                                     )
                                 )
                             )
                     )
                 }
//
               // drawing circles across the screen
                  Canvas(
                      modifier = modifier
                          .fillMaxSize()
//                          .animateBounds(
//                              modifier = Modifier,
//                              boundsTransform = { _, _ ->
//                                  spring(
//                                      dampingRatio = Spring.DampingRatioMediumBouncy,
//                                      stiffness = Spring.StiffnessLow
//                                  )
//                              },
//                              lookaheadScope = 
//                          )
                          .padding(
                              start = 24.dp,
                              end = 24.dp,
                              top = canvasTopPadding,
                              bottom = canvasBottomPadding
                          )
                  ) {
                      val path = Path().apply {
                          for (i in 0..50) {
                              val y = size.height * (i / 50f)
                              moveTo(0f, y)
                              lineTo(size.width, y)
                          }
                      }

                      val pathMeasure = PathMeasure()
                      pathMeasure.setPath(
                          path, false
                      )

                      for (i in 0..50) {
                          val y = size.height * (i / 50f)
                          val lineLength = size.width
                          val circleCount = 20

                          for (j in 0..circleCount) {
                              val x = j / circleCount.toFloat() * lineLength
                              drawCircle(
                                  brush = Brush.verticalGradient(
                                      colors = listOf(c1,c2,c3,c4)
                                  ), center = Offset(x, y),
                                  radius = 5f
                              )
                          }
                      }
                  }
   // the on effect
                if (!switchOff){
                    Box(
                        modifier = modifier
                            .size(100.dp)
                            .blur(10.dp)
                            .padding(
                                bottom = 20.dp, top = 36.dp
                            )

                            .align(Alignment.BottomCenter)
                            .background(
                                brush = Brush.verticalGradient(
                                    colors = listOf(
                                        Color(0xFFE03402), Color.Black
                                    )
                                )
                            )
                    )
                }

              }
          }
       }
   }
}