Untitled

@Composable
fun GoalExpansionScreen(
    goalName:String,
    goalId: String,
    state : GoalExpansionScreenState,
    onEvent: (GoalExpansionScreenEvent) -> Unit,
    list : List<RealmEntity>)
{
    LaunchedEffect(Unit)
    {
        onEvent(GoalExpansionScreenEvent.HeaderIdChanged(ObjectId(goalId)))
        onEvent(GoalExpansionScreenEvent.HeaderTitleChanged(goalName))

    }


    Scaffold(
        floatingActionButton = { FabFunGAE(onEvent) })
    {padding->
            Column(modifier = Modifier
                .fillMaxSize()
                .padding(padding))
            {
                Text(text = state.headerName,
                    textAlign = TextAlign.Center,
                    fontSize = 24.sp,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(10.dp)
                        .border(
                            width = 2.dp,
                            color = Color.Magenta,
                            shape = RoundedCornerShape(10.dp)
                        ))

                Column(modifier = Modifier
                    .fillMaxSize(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally)
                {

                    LazyColumn(modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight())
                    {
                        items(state.listOfImmediateChildren)
                        {r->
                            ChildrenCard(rE = r,
                                onChildAddClick = {
                                    onEvent(
                                        GoalExpansionScreenEvent
                                            .HeaderTitleChanged(
                                                r.name))
                                    onEvent(
                                        GoalExpansionScreenEvent
                                            .HeaderIdChanged(r._id))
                                    onEvent(
                                        GoalExpansionScreenEvent
                                        .RefreshListOfImmediateChildren
                                    )
                                },
                            onChildDeleteClick = {
                                onEvent(GoalExpansionScreenEvent
                                    .RealmEntityChanged(r))

                                onEvent(GoalExpansionScreenEvent
                                    .SelectedIdChanged(r._id))

                                onEvent(GoalExpansionScreenEvent
                                    .Delete)

                                onEvent(GoalExpansionScreenEvent
                                    .RefreshListOfImmediateChildren)
                            },
                            onEvent = onEvent)
                        }
                    }

                }
            }
        if(state.showDialog) { AddEditChildDialog(onEvent, state) }
    }

}

@Composable
fun ChildrenCard(rE:RealmEntity,
                 onChildAddClick:()->Unit,
                 onChildDeleteClick:()->Unit,
                 onEvent: (GoalExpansionScreenEvent) -> Unit
                 )
{
    ElevatedCard(modifier = Modifier
        .fillMaxWidth()
        .height(200.dp)
        .padding(10.dp),
        shape = RoundedCornerShape(40.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.onBackground)
    )
    {

        Column(modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally)
        {
            Row(modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 53.dp, vertical = 20.dp),
                horizontalArrangement = Arrangement.End)
            {
                Row{
                    IconButton(onClick = { /*TODO*/ },
                        modifier = Modifier
                            .height(15.dp)
                            .width(15.dp))
                    {
                        Icon(imageVector = ImageVector.vectorResource(
                            id = R.drawable.circleicon
                        ), contentDescription = "editIcon",
                            tint = MaterialTheme.colorScheme.background,
                            modifier = Modifier
                                .height(15.dp)
                                .width(15.dp))
                    }

                    Spacer(modifier = Modifier.width(20.dp))

                    IconButton(onClick = { onChildDeleteClick() },
                        modifier = Modifier
                            .height(15.dp)
                            .width(15.dp))
                    {
                        Icon(imageVector = ImageVector.vectorResource(
                            id = R.drawable.circleicon
                        ), contentDescription = "deleteIcon",
                            tint = MaterialTheme.colorScheme.background,
                            modifier = Modifier
                                .height(15.dp)
                                .width(15.dp))
                    }
                }

            }

            Column(modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 53.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally)
            {
                Text(text = rE.name,
                    fontSize = 24.sp)
                Divider(modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 10.dp)
                )
                Row(modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically)
                {
                    Row()
                    {
                        Text(text = "${rE.numberOfChildrenCompleted}")
                        Text(text = "/")
                        Text(text = "${rE.totalNumberOfChildren}")
                    }

                    Text(text = "${rE.progress}")

                    Checkbox(checked = rE.isCompleted,
                        onCheckedChange = {
                            if(rE.isCompleted)
                            {
                                onEvent(GoalExpansionScreenEvent
                                    .CompletionChanged(false))

                                onEvent(
                                    GoalExpansionScreenEvent
                                        .RealmEntityChanged(rE))

                                onEvent(GoalExpansionScreenEvent.
                                MarkCompleteOrInComplete)

                                onEvent(GoalExpansionScreenEvent
                                    .RefreshListOfImmediateChildren)

                            }else{

                                onEvent(GoalExpansionScreenEvent
                                    .CompletionChanged(true))

                                onEvent(
                                    GoalExpansionScreenEvent
                                        .RealmEntityChanged(rE))

                                onEvent(GoalExpansionScreenEvent.
                                MarkCompleteOrInComplete)

                                onEvent(GoalExpansionScreenEvent
                                    .RefreshListOfImmediateChildren)
                            }})

                    Icon(imageVector = Icons.Default.Add,
                        contentDescription = "",
                    modifier = Modifier.clickable {onChildAddClick()})
                }

            }
        }
    }
    }



@Composable
fun FabFunGAE(onEvent: (GoalExpansionScreenEvent) -> Unit)
{
    FloatingActionButton(onClick = {
        onEvent(GoalExpansionScreenEvent.ChangeDialogVisibility)

        onEvent(GoalExpansionScreenEvent
            .ModeChanged(ModeConstants.ADD))},

        modifier = Modifier
            .height(80.dp)
            .width(80.dp)
            .padding(10.dp))
    {
        Icon(imageVector = Icons.Default.Add,
            contentDescription = "Add")
    }
}

@Composable
fun AddEditChildDialog(
    onEvent: (GoalExpansionScreenEvent) -> Unit,
    state: GoalExpansionScreenState
)
{
    Dialog(onDismissRequest = {
        onEvent(GoalExpansionScreenEvent.ChangeDialogVisibility)
    })
    {
        ElevatedCard(modifier = Modifier
            .fillMaxWidth()
            .height(200.dp),
            shape  = RoundedCornerShape(15.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 15.dp)

        )
        {
            Column(modifier = Modifier
                .fillMaxSize()
                .padding(10.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally)
            {
                Spacer(modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f))

                AddChildOutlinedTextField(onEvent, state = state )

                Spacer(modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f))

                Row(modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.spacedBy(10.dp),
                    verticalAlignment = Alignment.CenterVertically)
                {
                    Spacer(modifier = Modifier.weight(1f))
                    Text(text = "Save",
                        fontSize = 16.sp,
                        modifier = Modifier.clickable{

                            onEvent(GoalExpansionScreenEvent.SaveOrEdit)

                            onEvent(GoalExpansionScreenEvent
                                .ChangeDialogVisibility)

                            onEvent(GoalExpansionScreenEvent
                                .RefreshListOfImmediateChildren)
                        })
                    Text(text = "Cancel",
                        fontSize = 16.sp,
                        modifier = Modifier.clickable {
                            onEvent(GoalExpansionScreenEvent
                                .ChangeDialogVisibility)})
                }

            }

        }

    }
}

@Composable
fun AddChildOutlinedTextField(
    onEvent: (GoalExpansionScreenEvent) -> Unit,
    state: GoalExpansionScreenState)
{
    OutlinedTextField(value = state.title ,
        onValueChange ={
            onEvent(GoalExpansionScreenEvent.TitleChanged(it))},
        colors = TextFieldDefaults
            .outlinedTextFieldColors(
                focusedBorderColor = if(state.cLabel == "Title")
                {
                    MaterialTheme.colorScheme.outline}
                else{
                    MaterialTheme.colorScheme.onErrorContainer},
                focusedLabelColor = if(state.cLabel == "Title")
                {
                    MaterialTheme.colorScheme.outline}
                else{
                    MaterialTheme.colorScheme.onErrorContainer},
                unfocusedBorderColor =
                if(state.cLabel == "Title") {
                    Color.LightGray}
                else{
                    MaterialTheme.colorScheme.outline},
                unfocusedLabelColor =
                if(state.cLabel == "Title") {
                    Color.LightGray}
                else{
                    MaterialTheme.colorScheme.onErrorContainer}
            ),
        textStyle = TextStyle(color =
        MaterialTheme.colorScheme.onBackground),
        label = { Text(text = state.cLabel,fontSize = 15.sp) },
        modifier = Modifier.fillMaxWidth())
}