/*
 * Copyright 2020 The Android Open Source Project
 *
 * 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 androidx.ui.androidview.demos

import android.graphics.Color
import android.view.View
import android.view.ViewGroup
import androidx.compose.Composable
import androidx.ui.androidview.adapters.setOnClick
import androidx.ui.core.Alignment
import androidx.ui.core.Modifier
import androidx.ui.core.gesture.tapGestureFilter
import androidx.ui.demos.common.ComposableDemo
import androidx.ui.demos.common.DemoCategory
import androidx.compose.foundation.Box
import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.ScrollableRow
import androidx.compose.foundation.Text
import androidx.ui.geometry.Offset
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredHeight
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.ui.unit.dp
import androidx.ui.viewinterop.AndroidView

val AndroidInComposeDemos = DemoCategory("Android In Compose Interop", listOf(
    ComposableDemo("4 Android tap in Compose") { FourAndroidTapInCompose() },
    ComposableDemo("Android tap in Compose tap") { AndroidTapInComposeTap() },
    ComposableDemo("Android tap in Compose scroll") { AndroidTapInComposeScroll() },
    ComposableDemo("Android scroll in Compose scroll (different orientation)") {
        AndroidScrollInComposeScrollDifferentOrientation()
    },
    ComposableDemo("Android scroll in Compose scroll (same orientation)") {
        AndroidScrollInComposeScrollSameOrientation()
    },
    ComposableDemo("2 ScrollViews as separate children of Compose") {
        TwoAndroidScrollViewsInCompose()
    }
))

@Composable
private fun FourAndroidTapInCompose() {
    Column {
        Text("Demonstrates that pointer locations are dispatched to Android correctly.")
        Text(
            "Below is a ViewGroup with 4 Android buttons in it.  When each button is tapped, the" +
                    " background of the ViewGroup is updated."
        )
        Box(
            Modifier
                .fillMaxSize()
                .wrapContentSize(Alignment.Center)
                .preferredSize(240.dp)
        ) {
            AndroidView(R.layout.android_4_buttons_in_compose) { view ->
                view as ViewGroup
                view.findViewById<View>(R.id.buttonBlue).setOnClick {
                    view.setBackgroundColor(Color.BLUE)
                }
                view.findViewById<View>(R.id.buttonRed).setOnClick {
                    view.setBackgroundColor(Color.RED)
                }
                view.findViewById<View>(R.id.buttonGreen).setOnClick {
                    view.setBackgroundColor(Color.GREEN)
                }
                view.findViewById<View>(R.id.buttonYellow).setOnClick {
                    view.setBackgroundColor(Color.YELLOW)
                }
            }
        }
    }
}

@Composable
private fun AndroidTapInComposeTap() {
    var theView: View? = null

    val onTap: (Offset) -> Unit = {
        theView?.setBackgroundColor(Color.BLUE)
    }

    Column {
        Text(
            "Demonstrates that pointer input interop is working correctly in the simple case of " +
                    "tapping."
        )
        Text(
            "Below there is an Android ViewGroup with a button in it.  The whole thing is wrapped" +
                    " in a Box with a tapGestureFilter modifier on it.  When you click the " +
                    "button, the ViewGroup's background turns red.  When you click anywhere else " +
                    "in the ViewGroup, the tapGestureFilter \"fires\" and the background turns " +
                    "Blue."
        )
        Box(
            Modifier
                .fillMaxSize()
                .wrapContentSize(Alignment.Center)
                .preferredSize(240.dp)
                .tapGestureFilter(onTap)
        ) {
            AndroidView(R.layout.android_tap_in_compose_tap) { view ->
                theView = view
                theView?.setBackgroundColor(Color.GREEN)
                view.findViewById<View>(R.id.buttonRed).setOnClick {
                    theView?.setBackgroundColor(Color.RED)
                }
            }
        }
    }
}

@Composable
private fun AndroidTapInComposeScroll() {
    Column {
        Text(
            "Demonstrates that pointer input interop is working correctly when tappable things in" +
                    " Android are put inside of something scrollable in Compose."
        )
        Text(
            "Below is a Compose HorizontalScroller with a wide horizontal LinearLayout in it, " +
                    "that is comprised of 4 buttons.  Clicking buttons changes the LinearLayout's" +
                    " background color.  When you drag horizontally, the HorizontalScroller drags" +
                    ". If a pointer starts on a button and then drags horizontally, the button " +
                    "will not be clicked when released."
        )
        ScrollableRow {
            AndroidView(R.layout.android_tap_in_compose_scroll) { view ->
                view.setBackgroundColor(Color.YELLOW)
                view.findViewById<View>(R.id.buttonRed).apply {
                    isClickable = false
                    setOnClick {
                        view.setBackgroundColor(Color.RED)
                    }
                }
                view.findViewById<View>(R.id.buttonGreen).apply {
                    isClickable = false
                    setOnClick {
                        view.setBackgroundColor(Color.GREEN)
                    }
                }
                view.findViewById<View>(R.id.buttonBlue).apply {
                    isClickable = false
                    setOnClick {
                        view.setBackgroundColor(Color.BLUE)
                    }
                }
                view.findViewById<View>(R.id.buttonYellow).apply {
                    isClickable = false
                    setOnClick {
                        view.setBackgroundColor(Color.YELLOW)
                    }
                }
            }
        }
    }
}

@Composable
private fun AndroidScrollInComposeScrollDifferentOrientation() {
    Column {
        Text(
            "Demonstrates correct \"scroll orientation\" locking when something scrollable in " +
                    "Android is nested inside something scrollable in Compose."
        )
        Text("You should only be able to scroll in one orientation at a time.")
        ScrollableRow(modifier = Modifier.background(androidx.ui.graphics.Color.Blue)) {
            Box(modifier = Modifier.padding(96.dp).background(androidx.ui.graphics.Color.Red)) {
                AndroidView(R.layout.android_scroll_in_compose_scroll_different_orientation)
            }
        }
    }
}

@Composable
private fun AndroidScrollInComposeScrollSameOrientation() {
    Column {
        Text(
            "Supposed to demonstrate correct nested scrolling when something scrollable in " +
                    "Android is inside something scrollable in Compose."
        )
        Text(
            "This doesn't actually work because nested scrolling isn't implemented between " +
                    "Compose and Android.  Normally, this lack of implementation would mean the " +
                    "parent would always intercept first and thus block the child from ever " +
                    "scrolling. However, currently, the touch slop for Android is smaller than " +
                    "that for Compose, and thus the child scrolls and prevents the parent from " +
                    "intercepting. "
        )
        ScrollableColumn(modifier = Modifier.background(androidx.ui.graphics.Color.Blue)) {
            Box(
                modifier = Modifier
                    .padding(96.dp)
                    .background(color = androidx.ui.graphics.Color.Red)
                    .preferredHeight(750.dp)
            ) {
                AndroidView(R.layout.android_scroll_in_compose_scroll_same_orientation)
            }
        }
    }
}

@Composable
private fun TwoAndroidScrollViewsInCompose() {
    Column {
        Text(
            "Below are two Android Scrollviews that are nested in two different children of " +
                    "Compose. The user should be able to scroll each independently at the same " +
                    "time, but given that we currently don't split motion, this is not work."
        )
        Row {
            AndroidView(R.layout.android_scrollview, Modifier.weight(2f))
            AndroidView(R.layout.android_scrollview, Modifier.weight(1f))
        }
    }
}