Parsing MainActivity to appcompat in jetpack compose

Question

I am in need of a datepicker in jetpack compose. Though to use the ordinary Datepicker in jetpack compose you need to parse Mainactivity to A AppcompatActivity. Though to do that what i understand the Mainactivity needs to extend AppCompatActivity? i am not able to get this to work can anyone please tell me what im doing wrong. I have already tried to extend AppCompatActivity as i said but then it gives you an error because it has to extend ComponentActivity? if i use this answer: AppCompatActivity instead of ComponentActivity in Jetpack compose i get this error.

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.jens.svensson.paper_seller/com.jens.svensson.paper_seller.MainActivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

Main Activity

package com.jens.svensson.paper_seller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.rememberScaffoldState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.google.android.material.datepicker.MaterialDatePicker
import com.jens.svensson.paper_seller.core.navigation.Navigation
import com.jens.svensson.paper_seller.core.navigation.Screens
import com.jens.svensson.paper_seller.core.presentation.components.StandardScaffold
import com.jens.svensson.paper_seller.ui.theme.PaperSellerTheme
import dagger.hilt.android.AndroidEntryPoint

@AndroidEntryPoint
@ExperimentalComposeUiApi
class MainActivity : AppCompatActivity()  {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PaperSellerTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val navController = rememberNavController()
                    val navBackStackEntry by navController.currentBackStackEntryAsState()
                    val scaffoldState = rememberScaffoldState()
                    StandardScaffold(
                        modifier = Modifier.fillMaxSize(),
                        navController = navController,
                        navBackStackEntry = navBackStackEntry,
                        showBottomBar = navBackStackEntry?.destination?.route in listOf(
                            Screens.CustomerListScreen.route,
                            Screens.CalculationScreen.route,
                            Screens.ChatScreen.route,
                            Screens.SettingsScreen.route
                        ),
                        showFloatButton = navBackStackEntry?.destination?.route in listOf(
                          Screens.CustomerListScreen.route
                        ),
                        state = scaffoldState,
                        onFabClick = {navController.navigate(Screens.AddEditCustomerScreen.route)}
                    ) {
                        Navigation(navController, scaffoldState)
                    }

                }
            }
        }
    }
}



@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    PaperSellerTheme {

    }
}

The datebuttonForm

package com.jens.svensson.paper_seller.feature_customer.presentation.components

import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.core.util.Pair
import com.google.android.material.datepicker.MaterialDatePicker
import com.jens.svensson.paper_seller.core.util.Constants


@Composable
fun ChosenDateForm(datePicked: String?, updatedDate: (Pair<Long, Long>) -> Unit){

    val activity = LocalContext.current as AppCompatActivity


    Box(modifier = Modifier.clickable { showDatePicker(activity = activity, updatedDate = updatedDate)}
        .padding(Constants.STANDARD_TEXTFIELD_PADDING.dp, top = 10.dp)
        .background(MaterialTheme.colors.secondaryVariant, RoundedCornerShape(20))
        .fillMaxWidth()
        .border(width = 1.dp, color = MaterialTheme.colors.primary, RoundedCornerShape(20))){
        Row(modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()) {
            Text(modifier = Modifier.weight(1f), text = "Today", style = MaterialTheme.typography.body1)
            Icon(Icons.Default.DateRange, contentDescription = "Select Date")
        }
    }



}
private fun showDatePicker(activity: AppCompatActivity, updatedDate: (Pair<Long, Long>) -> Unit){
    val calendar = MaterialDatePicker.Builder.dateRangePicker().build()
    calendar.show(activity.supportFragmentManager, calendar.toString())
    calendar.addOnPositiveButtonClickListener {
        updatedDate(it)
    }



}