<script lang="tsx">
    import type { Ref } from 'vue'
    import { computed, defineComponent, reactive, ref, unref, watch, watchEffect } from 'vue'
    import { useTimeoutFn } from '/@/hooks/core/useTimeout'
    import { useEventListener } from '/@/hooks/event/useEventListener'
    import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
    import { basicProps } from './props'
    import { getSlot } from '/@/utils/helper/tsxHelper'

    export default defineComponent({
        name: 'BaseDargVerify',
        props: basicProps,
        emits: ['success', 'update:value', 'change', 'start', 'move', 'end'],
        setup(props, { emit, slots, expose }) {
            const state = reactive({
                isMoving: false,
                isPassing: false,
                moveDistance: 0,
                toLeft: false,
                startTime: 0,
                endTime: 0,
            })

            const wrapElRef = ref<HTMLDivElement | null>(null)
            const barElRef = ref<HTMLDivElement | null>(null)
            const contentElRef = ref<HTMLDivElement | null>(null)
            const actionElRef = ref(null) as Ref<HTMLDivElement | null>

            useEventListener({
                el: document,
                name: 'mouseup',
                listener: () => {
                    if (state.isMoving) {
                        resume()
                    }
                },
            })

            const getActionStyleRef = computed(() => {
                const { height, actionStyle } = props
                const h = `${Number.parseInt(height as string)}px`
                return {
                    left: 0,
                    width: h,
                    height: h,
                    ...actionStyle,
                }
            })

            const getWrapStyleRef = computed(() => {
                const { height, width, circle, wrapStyle } = props
                const h = Number.parseInt(height as string)
                const w = `${Number.parseInt(width as string)}px`
                return {
                    width: w,
                    height: `${h}px`,
                    lineHeight: `${h}px`,
                    borderRadius: circle ? `${h / 2}px` : 0,
                    ...wrapStyle,
                }
            })

            const getBarStyleRef = computed(() => {
                const { height, circle, barStyle } = props
                const h = Number.parseInt(height as string)
                return {
                    height: `${h}px`,
                    borderRadius: circle ? `${h / 2}px 0 0 ${h / 2}px` : 0,
                    ...barStyle,
                }
            })

            const getContentStyleRef = computed(() => {
                const { height, width, contentStyle } = props
                const h = `${Number.parseInt(height as string)}px`
                const w = `${Number.parseInt(width as string)}px`

                return {
                    height: h,
                    width: w,
                    ...contentStyle,
                }
            })

            watch(
                () => state.isPassing,
                (isPassing) => {
                    if (isPassing) {
                        const { startTime, endTime } = state
                        const time = (endTime - startTime) / 1000
                        emit('success', { isPassing, time: time.toFixed(1) })
                        emit('update:value', isPassing)
                        emit('change', isPassing)
                    }
                },
            )

            watchEffect(() => {
                state.isPassing = !!props.value
            })

            function getEventPageX(e: MouseEvent | TouchEvent) {
                return (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX
            }

            function handleDragStart(e: MouseEvent | TouchEvent) {
                if (state.isPassing) {
                    return
                }
                const actionEl = unref(actionElRef)
                if (!actionEl) return
                emit('start', e)
                state.moveDistance = getEventPageX(e) - Number.parseInt(actionEl.style.left.replace('px', ''), 10)
                state.startTime = new Date().getTime()
                state.isMoving = true
            }

            function getOffset(el: HTMLDivElement) {
                const actionWidth = Number.parseInt(el.style.width)
                const { width } = props
                const widthNum = Number.parseInt(width as string)
                const offset = widthNum - actionWidth - 6
                return { offset, widthNum, actionWidth }
            }

            function handleDragMoving(e: MouseEvent | TouchEvent) {
                const { isMoving, moveDistance } = state
                if (isMoving) {
                    const actionEl = unref(actionElRef)
                    const barEl = unref(barElRef)
                    if (!actionEl || !barEl) return
                    const { offset, widthNum, actionWidth } = getOffset(actionEl)
                    const moveX = getEventPageX(e) - moveDistance

                    emit('move', {
                        event: e,
                        moveDistance,
                        moveX,
                    })
                    if (moveX > 0 && moveX <= offset) {
                        actionEl.style.left = `${moveX}px`
                        barEl.style.width = `${moveX + actionWidth / 2}px`
                    } else if (moveX > offset) {
                        actionEl.style.left = `${widthNum - actionWidth}px`
                        barEl.style.width = `${widthNum - actionWidth / 2}px`
                        if (!props.isSlot) {
                            checkPass()
                        }
                    }
                }
            }

            function handleDragOver(e: MouseEvent | TouchEvent) {
                const { isMoving, isPassing, moveDistance } = state
                if (isMoving && !isPassing) {
                    emit('end', e)
                    const actionEl = unref(actionElRef)
                    const barEl = unref(barElRef)
                    if (!actionEl || !barEl) return
                    const moveX = getEventPageX(e) - moveDistance
                    const { offset, widthNum, actionWidth } = getOffset(actionEl)
                    if (moveX < offset) {
                        if (!props.isSlot) {
                            resume()
                        } else {
                            setTimeout(() => {
                                if (!props.value) {
                                    resume()
                                } else {
                                    const contentEl = unref(contentElRef)
                                    if (contentEl) {
                                        contentEl.style.width = `${Number.parseInt(barEl.style.width)}px`
                                    }
                                }
                            }, 0)
                        }
                    } else {
                        actionEl.style.left = `${widthNum - actionWidth}px`
                        barEl.style.width = `${widthNum - actionWidth / 2}px`
                        checkPass()
                    }
                    state.isMoving = false
                }
            }

            function checkPass() {
                if (props.isSlot) {
                    resume()
                    return
                }
                state.endTime = new Date().getTime()
                state.isPassing = true
                state.isMoving = false
            }

            function resume() {
                state.isMoving = false
                state.isPassing = false
                state.moveDistance = 0
                state.toLeft = false
                state.startTime = 0
                state.endTime = 0
                const actionEl = unref(actionElRef)
                const barEl = unref(barElRef)
                const contentEl = unref(contentElRef)
                if (!actionEl || !barEl || !contentEl) return
                state.toLeft = true
                useTimeoutFn(() => {
                    state.toLeft = false
                    actionEl.style.left = '0'
                    barEl.style.width = '0'
                    //  The time is consistent with the animation time
                }, 300)
                contentEl.style.width = unref(getContentStyleRef).width
            }

            expose({
                resume,
            })

            return () => {
                const renderBar = () => {
                    const cls = [`darg-verify-bar`]
                    if (state.toLeft) {
                        cls.push('to-left')
                    }
                    return <div class={cls} ref={barElRef} style={unref(getBarStyleRef)} />
                }

                const renderContent = () => {
                    const cls = [`darg-verify-content`]
                    const { isPassing } = state
                    const { text, successText } = props

                    isPassing && cls.push('success')

                    return (
                        <div class={cls} ref={contentElRef} style={unref(getContentStyleRef)}>
                            {getSlot(slots, 'text', isPassing) || (isPassing ? successText : text)}
                        </div>
                    )
                }

                const renderAction = () => {
                    const cls = [`darg-verify-action`]
                    const { toLeft, isPassing } = state
                    if (toLeft) {
                        cls.push('to-left')
                    }
                    return (
                        <div
                            class={cls}
                            onMousedown={handleDragStart}
                            onTouchstart={handleDragStart}
                            style={unref(getActionStyleRef)}
                            ref={actionElRef}
                        >
                            {getSlot(slots, 'actionIcon', isPassing) ||
                                (isPassing ? (
                                    <CheckOutlined class={`darg-verify-action__icon`} />
                                ) : (
                                    <DoubleRightOutlined class={`darg-verify-action__icon`} />
                                ))}
                        </div>
                    )
                }

                return (
                    <div
                        class="darg-verify"
                        ref={wrapElRef}
                        style={unref(getWrapStyleRef)}
                        onMousemove={handleDragMoving}
                        onTouchmove={handleDragMoving}
                        onMouseleave={handleDragOver}
                        onMouseup={handleDragOver}
                        onTouchend={handleDragOver}
                    >
                        {renderBar()}
                        {renderContent()}
                        {renderAction()}
                    </div>
                )
            }
        },
    })
</script>

<style lang="less">
    @radius: 4px;

    .darg-verify {
        position: relative;
        overflow: hidden;
        text-align: center;
        background-color: rgb(238 238 238);
        border: 1px solid #ddd;
        border-radius: @radius;

        &-bar {
            position: absolute;
            width: 0;
            height: 36px;
            background-color: @success-color;
            border-radius: @radius;

            &.to-left {
                width: 0 !important;
                transition: width 0.3s;
            }
        }

        &-content {
            position: absolute;
            top: 0;
            font-size: 12px;
            text-size-adjust: none;
            background-color: -webkit-gradient(
                linear,
                left top,
                right top,
                color-stop(0, #333),
                color-stop(0.4, #333),
                color-stop(0.5, #fff),
                color-stop(0.6, #333),
                color-stop(1, #333)
            );
            animation: slidetounlock 3s infinite;
            background-clip: text;
            user-select: none;

            &.success {
                -webkit-text-fill-color: @white;
            }

            & > * {
                -webkit-text-fill-color: #333;
            }
        }

        &-action {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            cursor: move;
            background-color: @white;
            border-radius: @radius;
            justify-content: center;
            align-items: center;

            &__icon {
                cursor: inherit;
            }

            &.to-left {
                left: 0 !important;
                transition: left 0.3s;
            }
        }
    }

    @keyframes slidetounlock {
        0% {
            background-position: -120px 0;
        }

        100% {
            background-position: 120px 0;
        }
    }
</style>
