Display clusters

/* Copyright 2023 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.displayclusters

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme
import com.esri.arcgismaps.sample.displayclusters.screens.MainScreen

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // authentication with an API key or named user is
        // required to access basemaps and other location services
        ArcGISEnvironment.apiKey = ApiKey.create(BuildConfig.ACCESS_TOKEN)

        enableEdgeToEdge()
        setContent {
            SampleAppTheme {
                FeatureReductionApp()
            }
        }
    }

    @Composable
    private fun FeatureReductionApp() {
        Surface(
            color = MaterialTheme.colorScheme.background
        ) {
            MainScreen(
                sampleName = getString(R.string.display_clusters_app_name)
            )
        }
    }
}

/* Copyright 2023 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.displayclusters.components

import android.content.res.Configuration
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Close
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme
import com.esri.arcgismaps.sample.sampleslib.theme.SampleTypography

@Composable
fun ClusterInfoContent(
    popupTitle: String,
    clusterInfoList: MutableList<AnnotatedString>,
    onDismiss: () -> Unit = { },
) {
    Column(Modifier.background(MaterialTheme.colorScheme.background)) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text(
                modifier = Modifier
                    .padding(horizontal = 30.dp, vertical = 12.dp)
                    .weight(6f),
                text = popupTitle,
                style = SampleTypography.displaySmall
            )

            IconButton(
                modifier = Modifier.weight(1f),
                onClick = onDismiss
            ) {
                Icon(
                    imageVector = Icons.Rounded.Close,
                    contentDescription = "Close button"
                )
            }
        }

        clusterInfoList.forEach { annotatedString ->
            HorizontalDivider(
                modifier = Modifier.padding(horizontal = 12.dp),
                color = Color.LightGray
            )
            Text(
                modifier = Modifier.padding(horizontal = 30.dp, vertical = 16.dp),
                text = annotatedString
            )
        }
        Spacer(modifier = Modifier.size(24.dp))
    }
}

@Preview(showBackground = true)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
fun ClusterInfoContentPreview() {
    SampleAppTheme {
        ClusterInfoContent(
            popupTitle = "Cluster summary",
            clusterInfoList = mutableListOf(
                AnnotatedString("This is a cluster description")
            )
        )
    }
}

/* Copyright 2023 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.displayclusters.components

import android.app.Application
import android.graphics.Typeface
import android.text.Spanned
import android.text.style.ForegroundColorSpan
import android.text.style.StyleSpan
import android.text.style.UnderlineSpan
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.unit.dp
import androidx.core.text.HtmlCompat
import androidx.lifecycle.AndroidViewModel
import com.arcgismaps.LoadStatus
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.PortalItem
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.layers.FeatureLayer
import com.arcgismaps.mapping.popup.FieldsPopupElement
import com.arcgismaps.mapping.popup.TextPopupElement
import com.arcgismaps.mapping.view.IdentifyLayerResult
import com.arcgismaps.mapping.view.SingleTapConfirmedEvent
import com.arcgismaps.portal.Portal
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.esri.arcgismaps.sample.displayclusters.R
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

class MapViewModel(
    application: Application,
    private val sampleCoroutineScope: CoroutineScope
) : AndroidViewModel(application) {

    // create a ViewModel to handle dialog interactions
    val messageDialogVM: MessageDialogViewModel = MessageDialogViewModel()

    // Flag indicating whether feature reduction is enabled or not
    val isFeatureReductionEnabled = mutableStateOf(true)

    // Flag to show or dismiss the LoadingDialog
    val showLoadingDialog = mutableStateOf(false)

    // Flag to show or dismiss the bottom sheet
    val showClusterSummaryBottomSheet = mutableStateOf(false)

    // Initialize clusterInfoList which holds the popup details
    val clusterInfoList = mutableStateListOf<AnnotatedString>()

    // the title of the popup result
    val popupTitle = mutableStateOf("")

    // create a MapViewProxy that the view model will use to identify features in the MapView.
    // this also needs to be passed to the composable MapView() function.
    val mapViewProxy = MapViewProxy()

    // define ArcGIS map using Night Navigation basemap
    var map = ArcGISMap(BasemapStyle.ArcGISNavigationNight)

    init {
        // show loading dialog to indicate that the map is loading
        showLoadingDialog.value = true
        // load the portal and create a map from the portal item
        val portalItem = PortalItem(
            Portal(application.getString(R.string.portal_url)),
            "8916d50c44c746c1aafae001552bad23"
        )
        // set the map to be displayed in the layout's MapView and set it's initialViewpoint
        map = ArcGISMap(portalItem).apply {
            initialViewpoint = Viewpoint(39.8, -98.6, 10e7)
        }

        sampleCoroutineScope.launch {
            map.load().onSuccess {
                showLoadingDialog.value = false
            }
        }
    }

    /**
    `* Toggle the FeatureLayer's featureReduction property
     */
    fun toggleFeatureReduction() {
        isFeatureReductionEnabled.value = !isFeatureReductionEnabled.value
        if (map.loadStatus.value == LoadStatus.Loaded) {
            map.operationalLayers.forEach { layer ->
                when (layer) {
                    is FeatureLayer -> {
                        layer.featureReduction?.isEnabled = isFeatureReductionEnabled.value
                    }

                    else -> {}
                }
            }
        }
    }

    /**
     * Identifies the tapped screen coordinate in the provided [singleTapConfirmedEvent]
     */
    fun identify(singleTapConfirmedEvent: SingleTapConfirmedEvent) {
        sampleCoroutineScope.launch {
            dismissBottomSheet()
            // call identifyLayers when a tap event occurs
            val identifyResult = mapViewProxy.identifyLayers(singleTapConfirmedEvent.screenCoordinate, 3.dp)
            handleIdentifyResult(identifyResult)
        }
    }

    /**
     * Identify the feature layer results and display the resulting popup element information
     */
    private fun handleIdentifyResult(result: Result<List<IdentifyLayerResult>>) {
        sampleCoroutineScope.launch {
            result.onSuccess { identifyResultList ->
                // initialize the string for each tap event resulting in a new identifyResultList
                clusterInfoList.clear()
                popupTitle.value = ""
                identifyResultList.forEach { identifyLayerResult ->
                    val popups = identifyLayerResult.popups
                    popups.forEach { popup ->
                        // set the popup title
                        popupTitle.value = popup.title
                        // show the bottom sheet for the popup content
                        showClusterSummaryBottomSheet.value = true
                        popup.evaluateExpressions().onSuccess {
                            popup.evaluatedElements.forEach { popupElement ->
                                when (popupElement) {
                                    is FieldsPopupElement -> {
                                        popupElement.fields.forEach { popupField ->
                                            // convert popupField.label embedded with html tags using HtmlCompat.fromHtml
                                            clusterInfoList.add(
                                                HtmlCompat.fromHtml(
                                                    "${popupField.label}: ${popup.getFormattedValue(popupField)}",
                                                    HtmlCompat.FROM_HTML_MODE_COMPACT
                                                ).toAnnotatedString()
                                            )
                                        }
                                    }

                                    is TextPopupElement -> {
                                        // convert popupElement.text message embedded with html tags using HtmlCompat.fromHtml
                                        clusterInfoList.add(
                                            HtmlCompat.fromHtml(
                                                popupElement.text,
                                                HtmlCompat.FROM_HTML_MODE_COMPACT
                                            ).toAnnotatedString()
                                        )
                                    }

                                    else -> {
                                        clusterInfoList.add(
                                            HtmlCompat.fromHtml(
                                                "Unsupported popup element: ${popupElement.javaClass.name}",
                                                HtmlCompat.FROM_HTML_MODE_COMPACT
                                            ).toAnnotatedString()
                                        )
                                    }
                                }
                            }
                        }.onFailure { error ->
                            messageDialogVM.showMessageDialog(
                                title = "Error in evaluating popup expression: ${error.message.toString()}",
                                description = error.cause.toString()
                            )
                        }
                    }
                }
            }.onFailure { error ->
                messageDialogVM.showMessageDialog(
                    title = "Error in identify: ${error.message.toString()}",
                    description = error.cause.toString()
                )
            }
        }
    }

    /**
     * Dismiss the bottomsheet
     */
    fun dismissBottomSheet() {
        showClusterSummaryBottomSheet.value = false
    }

    /**
     * Helper function which converts a [Spanned] into an [AnnotatedString] trying to keep as much formatting as possible.
     * [AnnotatedString] is supported in compose via the Text composable
     *
     * Currently supports `bold`, `italic`, `underline` and `color`.
     * More info can be found at:
     * https://stackoverflow.com/questions/66494838/android-compose-how-to-use-html-tags-in-a-text-view and
     * https://medium.com/@kevinskrei/annotated-text-in-jetpack-compose-8dc596ed62d
     */
    private fun Spanned.toAnnotatedString(): AnnotatedString = buildAnnotatedString {
        val spanned = this@toAnnotatedString
        append(spanned.toString())
        getSpans(0, spanned.length, Any::class.java).forEach { span ->
            val start = getSpanStart(span)
            val end = getSpanEnd(span)
            when (span) {
                is StyleSpan -> when (span.style) {
                    Typeface.BOLD -> addStyle(SpanStyle(fontWeight = FontWeight.Bold), start, end)
                    Typeface.ITALIC -> addStyle(SpanStyle(fontStyle = FontStyle.Italic), start, end)
                    Typeface.BOLD_ITALIC -> addStyle(
                        SpanStyle(
                            fontWeight = FontWeight.Bold,
                            fontStyle = FontStyle.Italic
                        ), start, end
                    )
                }

                is UnderlineSpan -> addStyle(
                    SpanStyle(textDecoration = TextDecoration.Underline),
                    start,
                    end
                )

                is ForegroundColorSpan -> addStyle(
                    SpanStyle(color = Color(span.foregroundColor)),
                    start,
                    end
                )
            }
        }
    }
}

/* Copyright 2023 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.displayclusters.screens

import android.app.Application
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.esri.arcgismaps.sample.displayclusters.components.ClusterInfoContent
import com.esri.arcgismaps.sample.displayclusters.components.MapViewModel
import com.esri.arcgismaps.sample.sampleslib.components.BottomSheet
import com.esri.arcgismaps.sample.sampleslib.components.LoadingDialog
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialog
import com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar
import com.esri.arcgismaps.sample.sampleslib.theme.SampleTypography

/**
 * Main screen layout for the sample app
 */
@Composable
fun MainScreen(sampleName: String) {

    // coroutineScope that will be cancelled when this call leaves the composition
    val sampleCoroutineScope = rememberCoroutineScope()
    // get the application context
    val application = LocalContext.current.applicationContext as Application
    // create a ViewModel to handle MapView interactions
    val mapViewModel = remember { MapViewModel(application, sampleCoroutineScope) }

    Scaffold(
        topBar = { SampleTopAppBar(title = sampleName) },
        content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(it),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                MapView(
                    modifier = Modifier
                        .fillMaxSize()
                        .weight(1f),
                    arcGISMap = mapViewModel.map,
                    mapViewProxy = mapViewModel.mapViewProxy,
                    onSingleTapConfirmed = mapViewModel::identify,
                    onPan = { mapViewModel.dismissBottomSheet() }
                )
                // Button to enable/disable featureReduction property
                Row(
                    modifier = Modifier
                        .padding(12.dp)
                        .fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(
                        text = "Feature clustering",
                        style = SampleTypography.bodyMedium
                    )
                    Switch(
                        checked = mapViewModel.isFeatureReductionEnabled.value,
                        onCheckedChange = {
                            mapViewModel.toggleFeatureReduction()
                        })
                }

                // display a MessageDialog if the sample encounters an error
                mapViewModel.messageDialogVM.apply {
                    if (dialogStatus) {
                        MessageDialog(
                            title = messageTitle,
                            description = messageDescription,
                            onDismissRequest = ::dismissDialog
                        )
                    }
                }

                // display a LoadingDialog to indicate the map loading status
                if (mapViewModel.showLoadingDialog.value) {
                    LoadingDialog(loadingMessage = "Loading map...")
                }
            }

            // display a bottom sheet to show popup details
            BottomSheet(isVisible = mapViewModel.showClusterSummaryBottomSheet.value) {
                ClusterInfoContent(
                    popupTitle = mapViewModel.popupTitle.value,
                    clusterInfoList = mapViewModel.clusterInfoList,
                    onDismiss = { mapViewModel.dismissBottomSheet() }
                )
            }
        }
    )
}