Feature/similar movie screen

designSystem/src/main/java/com/madrid/designsystem/component/TopAppBar.kt

@@ -0,0 +1,74 @@
+package com.madrid.designsystem.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.madrid.designsystem.AppTheme
+import com.madrid.designsystem.R
+
+@Composable
+fun TopAppBar(
+    text: String?,
+    modifier: Modifier = Modifier,
+    firstIcon: Int? = R.drawable.arrow_left,
+    secondIcon: Int? = R.drawable.share_arrow,
+    thirdIcon: Int? = R.drawable.outline_heart
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        firstIcon?.let { iconRes ->
+            MovioIcon(
+                painter = painterResource(id = iconRes),
+                contentDescription = "arrow_left",
+                tint = AppTheme.colors.surfaceColor.onSurface
+            )
+        }
+        Box(
+            modifier = Modifier
+                .weight(1f)
+                .padding(horizontal = AppTheme.spacing.small),
+            contentAlignment = Alignment.Center
+        ) {
+            if (text != null) {
+                MovioText(
+                    text = text,
+                    textStyle = AppTheme.textStyle.headLine.largeBold18,
+                    color = AppTheme.colors.surfaceColor.onSurface
+                )
+            }
+        }
+
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            secondIcon?.let { iconRes ->
+                MovioIcon(
+                    painter = painterResource(id = iconRes),
+                    contentDescription = "share_arrow",
+                    tint = AppTheme.colors.surfaceColor.onSurface
+                )
+            }
+
+            thirdIcon?.let { iconRes ->
+                MovioIcon(
+                    painter = painterResource(id = iconRes),
+                    contentDescription = "outline_heart",
+                    tint = AppTheme.colors.surfaceColor.onSurface
+                )
+            }
+        }
+    }
+}

domain/src/main/java/com/madrid/domain/usecase/searchUseCase/PreferredMediaUseCase.kt

@@ -3,12 +3,5 @@ package com.madrid.domain.usecase.searchUseCase
 import com.madrid.domain.repository.SearchRepository
 
 class PreferredMediaUseCase(private val searchRepository: SearchRepository) {
-    /*   suspend fun getPreferredMedia(): List<Media> {
-           val categories = searchRepository.getMostSearchedCategories()
-           val medias: MutableList<Media> = mutableListOf()
-           categories.forEach { category ->
-               medias.add(searchRepository.getMediaByCategory(category))
-           }
-           return medias
-       }*/
+
 }

presentation/src/main/java/com/madrid/presentation/screens/detailsScreen/TopCastDetailsScreen.kt

@@ -0,0 +1,63 @@
+package com.madrid.presentation.screens.detailsScreen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.madrid.designsystem.AppTheme
+import com.madrid.designsystem.component.TopAppBar
+import com.madrid.presentation.R
+import com.madrid.presentation.composables.movioCards.MovioArtistsCard
+import com.madrid.presentation.screens.searchScreen.viewModel.SearchScreenState
+import com.madrid.presentation.screens.searchScreen.viewModel.SearchViewModel
+import org.koin.androidx.compose.koinViewModel
+
+@Composable
+fun TopCastDetailsScreen(
+    viewModel: SearchViewModel = koinViewModel()
+) {
+    val uiState = viewModel.state.collectAsState().value
+
+    TopCastDetailsContent(artist = uiState.filteredScreenUiState.artist)
+}
+
+@Composable
+fun TopCastDetailsContent(
+    artist: List<SearchScreenState.ArtistUiState>
+) {
+    LazyVerticalGrid(
+        columns = GridCells.Adaptive(minSize = 101.dp),
+        modifier = Modifier
+            .fillMaxSize()
+            .background(AppTheme.colors.surfaceColor.surface)
+            .statusBarsPadding(),
+        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 16.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        item(
+            span = { GridItemSpan(maxLineSpan) }
+        ) {
+            TopAppBar(stringResource(R.string.top_cast), secondIcon = null, thirdIcon = null)
+        }
+        items(
+            count = artist.size,
+        ) { index ->
+            MovioArtistsCard(
+                artistsName = artist[index].name,
+                imageUrl = artist[index].imageUrl,
+                width = 101.dp,
+                onClick = { }
+            )
+        }
+    }
+}

presentation/src/main/java/com/madrid/presentation/screens/similarMovies/SimilarMoviesScreen.kt

@@ -0,0 +1,138 @@
+package com.madrid.presentation.screens.similarMovies
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.madrid.designsystem.AppTheme
+import com.madrid.designsystem.R
+import com.madrid.designsystem.component.MovioIcon
+import com.madrid.designsystem.component.MovioText
+import com.madrid.presentation.composables.movioCards.MovioVerticalCard
+import com.madrid.presentation.screens.searchScreen.viewModel.SearchScreenState
+import com.madrid.presentation.screens.searchScreen.viewModel.SearchViewModel
+import org.koin.androidx.compose.koinViewModel
+
+@Composable
+fun SimilarMoviesScreen(
+    onBackClick: () -> Unit = {},
+    onMovieClick: (SearchScreenState.MovieUiState) -> Unit = {},
+    modifier: Modifier = Modifier,
+    viewModel: SearchViewModel = koinViewModel()
+) {
+    val state by viewModel.state.collectAsState()
+    var selectedMovieId by remember { mutableStateOf<String?>(null) }
+
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .background(AppTheme.colors.surfaceColor.surface)
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 12.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Box(
+                modifier = Modifier
+                    .size(40.dp)
+                    .clickable { onBackClick() },
+                contentAlignment = Alignment.Center
+            ) {
+                MovioIcon(
+                    painter = painterResource(R.drawable.arrow_left),
+                    contentDescription = "",
+                    tint = AppTheme.colors.surfaceColor.onSurface
+                )
+            }
+            Spacer(modifier = Modifier.weight(1f))
+            MovioText(
+                text = stringResource(id = com.madrid.presentation.R.string.selected_similar_movie),
+                textStyle = AppTheme.textStyle.headLine.largeBold18,
+                color = AppTheme.colors.surfaceColor.onSurface
+            )
+            Spacer(modifier = Modifier.weight(1f))
+        }
+        LazyVerticalGrid(
+            modifier = Modifier.fillMaxSize(),
+            columns = GridCells.Fixed(3),
+            contentPadding = PaddingValues(16.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            items(state.searchUiState.exploreMoreMovies) { movie ->
+                MovioVerticalCard(
+                    description = movie.title,
+                    movieImage = movie.imageUrl,
+                    rate = movie.rating,
+                    width = 101.33.dp,
+                    height = 136.dp,
+                    onClick = {
+                        selectedMovieId = movie.id
+                        onMovieClick(movie)
+                    },
+                    modifier = Modifier,
+                    paddingvalue = 0.dp
+                )
+            }
+        }
+        if (state.searchUiState.isLoading) {
+            Box(
+                Modifier
+                    .fillMaxWidth()
+                    .padding(16.dp),
+                contentAlignment = Alignment.Center
+            ) {
+                MovioText(
+                    text = stringResource(id = com.madrid.presentation.R.string.loading),
+                    color = AppTheme.colors.surfaceColor.onSurface,
+                    textStyle = AppTheme.textStyle.body.medium14
+                )
+            }
+        }
+        state.searchUiState.errorMessage?.let { errorMsg ->
+            Box(Modifier
+                .fillMaxWidth()
+                .padding(16.dp), contentAlignment = Alignment.Center) {
+                MovioText(
+                    text = errorMsg,
+                    color = AppTheme.colors.surfaceColor.outline,
+                    textStyle = AppTheme.textStyle.body.medium14
+                )
+            }
+        }
+    }
+}
+
+@Preview(showSystemUi = true, showBackground = true)
+@Composable
+fun SimilarMoviesScreenPreview() {
+    SimilarMoviesScreen(
+        onBackClick = {},
+        onMovieClick = {}
+    )
+} 

presentation/src/main/res/values-ar/string.xml

@@ -18,15 +18,19 @@
     <string name="Movies">الافلام</string>
     <string name="Series">المسلسلات</string>
     <string name="Artists">الممثلون</string>
-
     <string name="search_result_count">نتائج البحث (%1$s عنصر)</string>
+
     <string name="recent_search">البحث الأخير</string>
     <string name="clear_all">مسح الكل</string>
+    <string name="top_cast">أفضل طاقم</string>
+    <string name="selected_similar_movie">أفلام مشابهة</string>
+
     <string name="remove">إحذف</string>
     <string name="Rate_it">التقيم </string>
     <string name="Add_to_list">أضف الى القائمة </string>
     <string name="Play">تشغيل </string>
     <string name="for_u">من أجلك</string>
     <string name="see_all">رؤية الكل</string>
     <string name="explore_more">البحث عن المزيد</string>
+    <string name="loading">جاري التحميل...</string>
 </resources>

presentation/src/main/res/values/string.xml

@@ -21,13 +21,16 @@
         <string name="Movies">Movies</string>
         <string name="Series">Series</string>
         <string name="Artists">Artists</string>
-        <string name="search_result_count">SearchResult (%1$s items)</string>
+        <string name="search_result_count">SearchResult (%1$s items)</string>//
+        <string name="top_cast">Top Cast</string>
+        <string name="selected_similar_movie">Similar Movies</string>
         <string name="Rate_it">Rate it</string>
         <string name="Add_to_list">Add to list</string>
         <string name="Play">Play</string>
         <string name="for_u">For You</string>
         <string name="see_all">See all</string>
         <string name="explore_more">Explore more</string>
+        <string name="loading">Loading...</string>
 
 
 </resources>