import React, { useEffect } from 'react';
import { Checkbox, Row, Col } from 'antd';
import PropTypes from 'prop-types';
import { useSetState } from 'ahooks';
import SubTabs, { SubTabPane } from '../vm-sub-tabs';
import { Audio } from './api';
import './style';
import one from '../../image/1-active.png';
// import four from '../../image/4-active.png';
// import nine from '../../image/9-active.png';
import video from '../../image/video.png';
import { getVtxToken } from '@vtx/utils';
const { tenantId, userId } = getVtxToken();

const AudioContent = props => {
    const { id, code, seed } = props;
    const screenList = [
        {
            id: 1,
            src: one,
        },
    ];
    const [state, setState] = useSetState({
        activeKey: '',
        src: '', // 1分屏地址
        value: '',
    });

    useEffect(() => {
        if (seed)
            setState({
                activeKey: '',
                src: '', // 1分屏地址
                value: '',
            });
    }, [seed]);
    const treeData = Audio.useVisTree(code, id);
    const onChange = checked => {
        if (checked.length === 0) {
            setState({ src: '', value: [] });
        } else if (checked.length > 0) {
            setState({
                src: `/vis/video/VIS_H5/bounced.html?videoChannelId=${
                    checked[checked.length - 1]
                }&tenantId=${tenantId}&userId=${userId}`,
                value: [checked[checked.length - 1]],
            });
        }
    };
    const handleTabChange = activeKey => {
        setState({ activeKey });
    };
    return (
        <div className="audio-content" style={{ width: '100%', height: '100%' }}>
            <div className="left">
                {/* 视频列表 */}
                <Checkbox.Group style={{ width: '100%' }} onChange={onChange} value={state.value}>
                    <Row gutter={20}>
                        {treeData?.length > 0 &&
                            treeData.map(item => (
                                <Col
                                    span={24}
                                    key={item?.videoChannelId}
                                    style={{ marginBottom: 10 }}
                                >
                                    <Checkbox value={item?.videoChannelId}>
                                        <span className="text">{item?.channelName}</span>
                                    </Checkbox>
                                </Col>
                            ))}
                    </Row>
                </Checkbox.Group>
            </div>
            <div className="right">
                <div className="right-tabs">
                    <SubTabs onTabClick={handleTabChange} activeKey={state.activeKey || '1'}>
                        {screenList.map(item => (
                            <SubTabPane key={item.id} tab={<img src={item.src} />}></SubTabPane>
                        ))}
                    </SubTabs>
                </div>
                {/* {Array(Number(state.activeKey || '1')).fill({ src: '' }).map(item => { */}
                <div
                    className="OCXBody"
                    style={{
                        width:
                            (state.activeKey || '1') === '1'
                                ? '100%'
                                : (state.activeKey || '1') === '4'
                                ? 'calc(50% -6px)'
                                : 'calc(33% -6px)',
                        height:
                            (state.activeKey || '1') === '1'
                                ? '100%'
                                : (state.activeKey || '1') === '4'
                                ? 'calc(50% -6px)'
                                : 'calc(33% -6px)',
                    }}
                >
                    <div
                        className="name"
                        style={{ width: '100%', height: '100%', backgroundColor: 'grey' }}
                    >
                        {state.src === '' ? (
                            <img src={video} />
                        ) : (
                            <iframe style={{ width: '100%', height: '100%' }} src={state.src} />
                        )}
                    </div>
                </div>
                {/* })} */}
            </div>
        </div>
    );
};

AudioContent.propTypes = {
    id: PropTypes.string,
    code: PropTypes.string,
    seed: PropTypes.string,
};

export default AudioContent;