import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import { ysptz, gbptz } from '$utils'
import './videoPlay.less';

const VideoOperationCloudControl = ({
    videoObj, iotVideoServer
}) => {

    const cloudControl = (ac) => {
        if (videoObj.type == 'yingshi') {
            ysptz(ac, videoObj)
        } else {
            gbptz(ac, videoObj, iotVideoServer)
        }
    }
    const vcmpVideo = document.getElementsByClassName('vcmp_video'+videoObj.id)?.offsetHeight;
    console.log(vcmpVideo);
    return (
            <div style={{
                position: 'absolute', top: 'calc(50% - 105px)', left: 'calc(50% - 125px)',
                width: 210, height: 250, backgroundColor: '#00000014', borderRadius: 68, transform: `scale(${vcmpVideo / 400 > 2.5 ? 2.5 : vcmpVideo / 400})`,
            }}>
                <div style={{
                    height: 148, width: 148, borderRadius: '100%', backgroundColor: '#2F53EA72', margin: '12px auto 18px',
                    position: 'relative',
                }}>
                    {
                        [{
                            style: { top: 12, left: (148 - 24) / 2, },
                            click: () => { cloudControl('up') }
                        }, {
                            style: { right: 12, top: (148 - 24) / 2, },
                            click: () => { cloudControl('right') },
                        }, {
                            style: { bottom: 12, left: (148 - 24) / 2, },
                            click: () => { cloudControl('down') },
                        }, {
                            style: { left: 12, top: (148 - 24) / 2 },
                            click: () => { cloudControl('left') },
                        }].map((s, i) => {
                            return (
                                <img
                                    src="/assets/images/background/up.png"
                                    style={Object.assign({
                                        height: 24, width: 24, display: 'inline-block', transform: `rotate(${i * 90}deg)`,
                                        position: 'absolute'
                                    }, s.style)}
                                    onClick={s.click}
                                />
                            )
                        })
                    }
                    <div style={{
                        height: 32, width: 32, border: '2px solid #ffffff24', borderRadius: '100%',
                        position: 'absolute', top: (148 - 34) / 2, left: (148 - 34) / 2
                    }} />
                </div>
                {
                    [
                        [{ n: '+', click: () => { cloudControl('focus_in') }, }, { n: '焦距' }, { n: '-', click: () => { cloudControl('focus_out') }, }],
                        [{ n: '+', click: () => { cloudControl('zoom_in') }, }, { n: '缩放' }, { n: '-', click: () => { cloudControl('zoom_out') }, }],
                    ].map(s => {
                        return (
                            <div style={{
                                width: 110, height: 22, margin: '0 auto 6px', display: 'flex', alignContent: 'center', justifyContent: 'space-around',
                                backgroundColor: '#2F53EA72', color: '#fff'
                            }}>
                                {
                                    s.map((m, mi) => {
                                        return (
                                            <div
                                                style={{ textAlign: 'center', display: 'inline-block', cursor: mi != 1 ? 'pointer' : 'auto' }}
                                                onClick={() => { m.click ? m.click() : null }}
                                            >{m.n}</div>
                                        )
                                    })
                                }
                            </div>
                        )
                    })
                }
        </div>
    )

}

function mapStateToProps (state) {
    const { auth, global } = state;
    return {
        user: auth.user,
        iotVideoServer: global.iotVideoServer,
    };
}

export default connect(mapStateToProps)(VideoOperationCloudControl);