import android.animation.ValueAnimator
import android.annotation.SuppressLint
import android.content.Context
import android.graphics.Canvas
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import android.view.ViewGroup.LayoutParams
import androidx.core.animation.addListener
import androidx.core.view.forEach
import com.silencefly96.module_common.R
import kotlin.math.abs
/**
 * 類似舊版QQ，兩層頁面，切換的使用有互相移動動畫
 * 核心思路
 * 1、兩部分，主內容和左邊側滑欄，側滑欄不完全占滿主內容
 * 2、在主內容頁面向右滑動展現側滑欄，同時主內容以更慢的速度向右滑動
 * 3、側滑欄完全顯示時不再左滑
 * 4、類似側滑欄，通過自定義屬性來指定側滑欄頁面，其他view為主內容
 * 5、側滑欄就一個view，容器內其他view作為主內容，view擺放類似垂直方向LinearLayout
 */
@Suppress("unused")
class TwoLayerSlideLayout @JvmOverloads constructor(
    context: Context,
    attributeSet: AttributeSet? = null,
    defStyleAttr: Int = 0
): ViewGroup(context, attributeSet, defStyleAttr){
    @Suppress("unused")
    companion object{
        //側滑共有四個方向，一個不設置的屬性，暫時只實現GRAVITY_TYPE_LEFT
        const val GRAVITY_TYPE_NULL = -1
        const val GRAVITY_TYPE_LEFT = 0
        const val GRAVITY_TYPE_TOP = 1
        const val GRAVITY_TYPE_RIGHT = 2
        const val GRAVITY_TYPE_BOTTOM = 3
        //滑動狀態
        const val SLIDE_STATE_TYPE_CLOSED = 0
        const val SLIDE_STATE_TYPE_MOVING = 1
        const val SLIDE_STATE_TYPE_OPENED = 2
    }
    //側滑欄控件
    private var mSlideView: View? = null
    //滑動狀態
    private var mState = SLIDE_STATE_TYPE_CLOSED
    //最大滑動長度
    private var maxScrollLength: Float
    //最大動畫使用時間
    private var maxAnimatorPeriod: Int
    //上次事件的橫坐標
    private var mLastX = 0f
    //累計的滑動距離
    private var mScrollLength: Float = 0f
    //側滑欄所占比例
    private var mSidePercent: Float = 0.75f
    //切換到目標狀態的屬性動畫
    private var mAnimator: ValueAnimator? = null
    init {
        //讀取XML參數
        val attrArr = context.obtainStyledAttributes(attributeSet, R.styleable.TwoLayerSlideLayout)
        //獲得XML里面設置的最大滑動長度，沒有的話需要在onMeasure后根據控件寬度設置
        maxScrollLength = attrArr.getDimension(R.styleable.TwoLayerSlideLayout_maxScrollLength,
            0f)
        //最大動畫時間
        maxAnimatorPeriod = attrArr.getInteger(R.styleable.TwoLayerSlideLayout_maxAnimatorPeriod,
            300)
        //側滑欄所占比例
        mSidePercent = attrArr.getFraction(R.styleable.TwoLayerSlideLayout_mSidePercent,
            1,1,0.75f)
        attrArr.recycle()
    }
    //測量會進行多次
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        //用默認方法，計算出所有的childView的寬和高，帶padding不帶margin
        //measureChildren(widthMeasureSpec, heightMeasureSpec)
        //getDefaultSize會根據默認值、模式、spec的值給到結果，建議點進去看看
        val width = getDefaultSize(suggestedMinimumWidth, widthMeasureSpec)
        val height = getDefaultSize(suggestedMinimumHeight, heightMeasureSpec)
        //類似垂直方向LinearLayout，統計一下垂直方向高度使用情況
        //var widthUsed = 0
        var heightUsed = paddingTop
        var childWidthMeasureSpec: Int
        var childHeightMeasureSpec: Int
        forEach { child->
            //獲取設定的gravity，用于判定是否是側滑欄view，只要最后一個
            val childLayoutParams = child.layoutParams as LayoutParams
            val gravity = childLayoutParams.gravity
            if (gravity != GRAVITY_TYPE_NULL) {
                //暫不支持除左滑以外的情況
                if (gravity != GRAVITY_TYPE_LEFT)
                    throw IllegalArgumentException("function not support")
                //取到側滑欄，多個時取最后一個
                mSlideView = child
                //側滑欄大小另外測量，高度鋪滿父容器，寬度設置為父容器的四分之三
                childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
                    (width * mSidePercent).toInt(), MeasureSpec.EXACTLY)
                //高度不限定
                childHeightMeasureSpec =
                    MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
                //側滑欄不帶padding和margin
                child.measure(childWidthMeasureSpec, childHeightMeasureSpec)
            }else {
                //寬按需求申請，所以應該用AT_MOST，并向下層view傳遞
                childWidthMeasureSpec =
                    MeasureSpec.makeMeasureSpec(width, MeasureSpec.AT_MOST)
                childHeightMeasureSpec =
                    MeasureSpec.makeMeasureSpec(height, MeasureSpec.AT_MOST)
                //heightUsed會在getChildMeasureSpec中用到，MATCH_PARENT時占滿剩余size
                //WRAP_CONTENT時，會帶著MeasureSpec.AT_MOST及剩余size向下層傳遞
                //帶padding和margin的測量，推薦看看measureChildWithMargins
                //里面用到的getChildMeasureSpec函數，加深對MeasureSpec理解
                measureChildWithMargins(child, widthMeasureSpec, 0,
                    heightMeasureSpec, heightUsed)
                //計算的時候要加上child的margin值
                //widthUsed += child.measuredWidth
                heightUsed += child.measuredHeight +
                        childLayoutParams.topMargin + childLayoutParams.bottomMargin
            }
        }
        //最后加上本控件的paddingBottom，最終計算得到最終高度
        heightUsed += paddingBottom
        //設置最大滑動長度為寬度的三分之一
        if (maxScrollLength == 0f) {
            maxScrollLength = width / 3f
        }
        //設置測量參數，這里不能用heightUsed，因為雖然主內容可能未用完height，但是側滑欄用完了height
        setMeasuredDimension(width, height)
    }
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        //滑動時的偏移值，計算dx的時候時前面減后面，這里偏移值應該是后面減前面，所以取負
        val mainOffset = -mScrollLength / maxScrollLength * measuredWidth * (1 - mSidePercent)
        val slideOffset = -mScrollLength / maxScrollLength * (measuredWidth * mSidePercent)
        //不要忘記了paddingTop和paddingLeft，不然內容會被padding的背景覆蓋
        var curHeight = paddingTop
        //布局
        var layoutParams: LayoutParams
        var gravity: Int
        var cTop: Int
        var cRight: Int
        var cLeft: Int
        var cBottom: Int
        forEach { child ->
            //獲取設定的gravity，用于判定是否是側滑欄view，只要最后一個
            layoutParams = child.layoutParams as LayoutParams
            gravity = layoutParams.gravity
            //布局主內容中view
            if (gravity == GRAVITY_TYPE_NULL) {
                //其他view帶上累加高度布局
                cTop = layoutParams.topMargin + curHeight
                cLeft = paddingLeft + layoutParams.leftMargin + mainOffset.toInt()
                cRight = cLeft + child.measuredWidth
                cBottom = cTop + child.measuredHeight
                //布局
                child.layout(cLeft, cTop, cRight, cBottom)
                //累加高度
                curHeight = cBottom + layoutParams.bottomMargin
            }
        }
        //最后繪制側滑欄，使其在最頂層？？？這里直接layout是沒用的，繪想想看，繪制是onDraw的職責,這里有兩個種辦法
        //一是在XML中將側滑欄放到最后去，二是將mSlideView放到children的最后去，onDraw內應該是for循環繪制的
        mSlideView?.let {
            //下面方法是專門在onLayout方法中使用的，不會觸發requestLayout
            removeViewInLayout(mSlideView)
            addViewInLayout(mSlideView!!, childCount, mSlideView!!.layoutParams)
            //這里還有一個問題，當當前view設置padding的時候，側滑欄會被裁切,設置不裁切padding內容
            this.layoutParams.apply {
                //不裁切孫view在父view超出的部分，讓孫view在爺爺view中正常顯示，這里不需要
                //clipChildren = false
                clipToPadding = false
            }
            //在頁面左邊
            cTop = 0
            cRight = slideOffset.toInt()
            cLeft = cRight - mSlideView!!.measuredWidth
            cBottom = cTop + mSlideView!!.measuredHeight
            //布局
            mSlideView!!.layout(cLeft, cTop, cRight, cBottom)
        }
    }
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
    }
    override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
        ev?.let {
            when(ev.action) {
                MotionEvent.ACTION_DOWN -> preMove(ev)
                MotionEvent.ACTION_MOVE -> return true
            }
        }
        return super.onInterceptTouchEvent(ev)
    }
    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(ev: MotionEvent?): Boolean {
        ev?.let {
            when(ev.action) {
                //如果子控件未攔截ACTION_DOWN事件或者點擊在view沒有子控件的地方，onTouchEvent要處理
                MotionEvent.ACTION_DOWN -> {
                    //preMove(ev)
                    return true
                }
                MotionEvent.ACTION_MOVE -> moveView(ev)
                MotionEvent.ACTION_UP -> stopMove()
            }
        }
        return super.onTouchEvent(ev)
    }
    private fun preMove(e: MotionEvent) {
        mLastX = e.x
        if (mState == SLIDE_STATE_TYPE_MOVING) {
            //要取消結束監聽，防止錯誤修改狀態，把當前位置交給接下來的滑動處理
            mAnimator?.removeAllListeners()
            mAnimator?.cancel()
        }else {
            //關閉和展開時，點擊滑動應該切換狀態
            mState = SLIDE_STATE_TYPE_MOVING
        }
    }
    private fun moveView(e: MotionEvent) {
        //沒有側滑欄不移動，避免多次請求布局
        if (mSlideView == null) return
        //注意前面減去后面，就是頁面應該scroll的值
        val dx = mLastX - e.x
        mLastX = e.x
        //Log.e("TAG", "moveView: mScrollLength=$mScrollLength")
        //設定滑動范圍，注意mScrollLength和scrollX是不一樣的，我們要實現不同的滑動效果
        //注意滑動的是窗口，view是窗口下的內容，手指向右滑動，頁面（即主內容）向左移動，窗口向右移動
        if ((mScrollLength + dx) >= -maxScrollLength && (mScrollLength + dx) <= 0) {
            //范圍內，疊加差值
            mScrollLength += dx
            //手指向右滑動，主內容向左緩慢滑動，側滑欄向右滑動
            //要體現更慢的速度，主內容就移動側滑欄所占比例的剩余值
            //val mainDx =  dx / maxScrollLength * measuredWidth * (1 - mSidePercent)
            //scrollBy(mainDx.toInt(), 0)
            //側滑欄速度更大，這里據最大滑動距離和側滑欄的寬度做個映射
            //val sideDx = dx / maxScrollLength * (measuredWidth * mSidePercent)
            //側滑欄的移動不能使用scrollTo和scrollBy，因為僅僅移動的是其中的內容，并不會移動整個view
            //可以理解成scrollTo和scrollBy只是在該對象的原有位置移動，即使移動了也不會在其范圍之外顯示（draw）
            //屬性動畫可以實現在父容器里面對子控件的移動，但是也是通過修改屬性值重新布局實現的
            //sideView!!.scrollTo(sideView!!.scrollX + sideDx.toInt(), 0)
            //這里累加mScrollLength后直接請求重新布局，在onLayout里面去處理移動
            requestLayout()
        }
    }
    private fun stopMove() {
        //停止后，使用動畫移動到目標位置
        val terminalScrollX: Float = if (abs(mScrollLength) >= maxScrollLength / 2f) {
            //觸發移動至完全展開，mScrollLength是個負數
            -maxScrollLength
        }else {
            //如果移動沒過半應該恢復狀態，則恢復到原來狀態
            0f
        }
        //這里使用ValueAnimator處理剩余的距離，模擬滑動到需要的位置
        mAnimator = ValueAnimator.ofFloat(mScrollLength, terminalScrollX)
        mAnimator!!.addUpdateListener { animation ->
            mScrollLength = animation.animatedValue as Float
            //請求重新布局
            requestLayout()
        }
        //動畫結束時要更新狀態
        mAnimator!!.addListener (onEnd = {
            mState = if(mScrollLength == 0f) SLIDE_STATE_TYPE_CLOSED else SLIDE_STATE_TYPE_OPENED
        })
        //滑動動畫總時間應該和距離有關
        val percent = 1 - abs(mScrollLength / maxScrollLength)
        mAnimator!!.duration = (maxAnimatorPeriod * abs(percent)).toLong()
        //mAnimator.duration = maxAnimatorPeriod.toLong()
        mAnimator!!.start()
    }
    //自定義的LayoutParams，子控件使用的是父控件的LayoutParams，所以父控件可以增加自己的屬性，在子控件XML中使用
    @Suppress("MemberVisibilityCanBePrivate")
    class LayoutParams : MarginLayoutParams {
        //側滑欄方向，不設置就是null
        var gravity: Int = GRAVITY_TYPE_NULL
        //三個構造
        constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
            //讀取XML參數，設置相關屬性，這里有個很煩的warning，樣式必須是外部類加layout結尾
            val attrArr =
                context.obtainStyledAttributes(attrs, R.styleable.TwoLayerSlideLayout_Layout)
            gravity = attrArr.getInteger(
                R.styleable.TwoLayerSlideLayout_Layout_slide_gravity, GRAVITY_TYPE_NULL)
            //回收
            attrArr.recycle()
        }
        constructor(width: Int, height: Int) : super(width, height)
        constructor(source: ViewGroup.LayoutParams) : super(source)
    }
    //重寫下面四個函數，在布局文件被填充為對象的時候調用的
    override fun generateLayoutParams(attrs: AttributeSet): ViewGroup.LayoutParams {
        return LayoutParams(context, attrs)
    }
    override fun generateLayoutParams(p: ViewGroup.LayoutParams?): ViewGroup.LayoutParams {
        return LayoutParams(p)
    }
    override fun generateDefaultLayoutParams(): ViewGroup.LayoutParams {
        return LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT)
    }
    override fun checkLayoutParams(p: ViewGroup.LayoutParams?): Boolean {
        return p is LayoutParams
    }
}

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name ="TwoLayerSlideLayout">
        <attr name="maxScrollLength" format="dimension"/>
        <attr name="maxAnimatorPeriod" format="integer"/>
        <attr name="mSidePercent" format="fraction"/>
    </declare-styleable>
    <declare-styleable name ="TwoLayerSlideLayout.Layout">
        <attr name ="slide_gravity">
            <enum name ="left" value="0" />
            <enum name ="top" value="1" />
            <enum name ="right" value="2" />
            <enum name ="bottom" value="3" />
        </attr >
    </declare-styleable>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.silencefly96.module_common.view.TwoLayerSlideLayout
        android:id="@+id/hhView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/teal_700"
        android:padding="50dp"
        app:mSidePercent="75%"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <LinearLayout
            app:slide_gravity="left"
            android:background="@color/teal_200"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="@string/test_string"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </LinearLayout>
        <TextView
            android:background="@color/purple_200"
            android:layout_marginTop="10dp"
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <TextView
            android:background="@color/purple_200"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <TextView
            android:background="@color/purple_200"
            android:layout_marginTop="50dp"
            android:text="@string/test_string"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.silencefly96.module_common.view.TwoLayerSlideLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

val mainOffset = -mScrollLength / maxScrollLength * measuredWidth * (1 - mSidePercent)
val slideOffset = -mScrollLength / maxScrollLength * (measuredWidth * mSidePercent)