import React, { useState, useEffect, useContext, useRef, memo } from 'react';
import {Link} from 'react-router-dom';
import { Pagination, Input, Button } from 'antd'
import { getUrl2, isDev, ThemeContext, ActionBtn } from 'educoder'
import axios from 'axios'
import VideoInReviewItem from './VideoInReviewItem'
import EditVideoModal from './EditVideoModal'
import './InfosVideo.css'
import InfoTab from '../common/InfoTab'
import HeadlessModal from '../common/HeadlessModal'
import CRoundSelect from '../common/CRoundSelect'

import ClipboardJS from 'clipboard'

function useModal(initValue) {
    const [visible, setVisible] = useState(initValue)

    return {
        visible,
        setVisible
    }
}
function useCategory(initValue) {
    const [category, setCategory] = useState(initValue)
    function changeCategory(key) {
        setCategory(key)
    }
    return {
        category,
        changeCategory
    }
}
function usePagination() {
    const [page, setPage] = useState(1)
    function onPageChange(page) {
        setPage(page)
    }
    return {
        current: page,
        onChange: onPageChange
    }
}
const PAGE_SIZE = 3
const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
let videoId = {};
let _clipboard = null;
const _items=[
    {key: 'published_at-desc', name: '最新上传'},
    {key: 'published_at-asc', name: '最早上传'},
]
function InfoVideo (props) {
    const [videoes, setVideoes] = useState([])
    const [reviewVideoes, setReviewVideoes] = useState([])
    const [count, setCount] = useState(0)
    const [sortKey, setSortKey] = useState(_items[0].key)
    
    const editModalObj = useModal(false)
    const videoModalObj = useModal(false)
    const categoryObj = useCategory('all')
    const pageObj = usePagination()

    const theme = useContext(ThemeContext);
    const editModalEl = useRef(null);
    const videoEl = useRef(null);
    
    const { showNotification, history } = props;
    const username = props.match.params.username

    function toUpload() {
        history.push(`/users/${username}/videoes/upload`)
    }
    function fetchVideoes() {
        const fetchUrl = `/users/${username}/videos.json`
        const sorts = sortKey.split('-')
        axios.get(fetchUrl, { 
            params: {
                page: pageObj.current,
                per_page: PAGE_SIZE,
                sort_by: sorts[0],
                sort_direction: sorts[1],
                // 
            }
        })
        .then((response) => {
            if (response.data.videos) {
                setVideoes(response.data.videos)
                setCount(response.data.count)
            }
        }).catch(() => {

        })
    }
    function fetchReviewVideoes() {
        const fetchUrl = `/users/${username}/videos/review.json`
        axios.get(fetchUrl, { 
            params: {
                per_page: 200
            }
        })
        .then((response) => {
            if (response.data.videos) {
                setReviewVideoes(response.data.videos)
            }
        }).catch(() => {

        })
    }
    
    useEffect(() => {
        fetchVideoes()
    }, [pageObj.current, sortKey])

    useEffect(() => {
        if (categoryObj.category == 'all') {
            fetchVideoes()
        } else {
            fetchReviewVideoes()
        }
    }, [categoryObj.category])

    useEffect(() => {
        if (videoModalObj.visible == false) {
            // 关闭视频
            videoEl.current && videoEl.current.pause()
            if (_clipboard) {
                _clipboard.destroy();
                _clipboard = null;
            }
        } else {
            setTimeout(() => {
                if (!_clipboard) {
                    _clipboard = new ClipboardJS('.copybtn');
                    _clipboard.on('success', (e) => {
                        showNotification('复制成功')
                    });                    
                }
            }, 200)            
        }
    }, [videoModalObj.visible])

    useEffect(() => {
        
    }, [])

    function editSuccess() {
        fetchVideoes()
    }
    
    function onEditVideo(item) {
        videoId = { 
            videoId: item.id,
            title: item.title
        }
        editModalObj.setVisible(true)
        // editModalEl.current.toList(true, video);
        // this.refs['editVideoModal'].setVisible(true, video);
    }
    function onMaskClick(item) {
        videoId = { 
            videoId: item.id,
            title: item.title,
            file_url: item.file_url,
            cover_url: item.cover_url
            
        }
        videoModalObj.setVisible(true)
    }
    // TODO use封装
    function onSortChange(key, index) {
        const _item = _items[index]
        _items.splice(index, 1)
        _items.unshift(_item)
        setSortKey(key)
    }
    function getCopyText (file_url, cover_url) {
        return `<video src="${file_url}" controls="true" controlslist="nodownload" width="${DEFAULT_VIDEO_WIDTH_IN_MD}" height="${DEFAULT_VIDEO_HEIGHT_IN_MD}" poster="${cover_url}">您的浏览器不支持 video 标签。</video>`
    }
    const _inputValue = getCopyText(videoId.file_url, videoId.cover_url)
    return (
        <div className="educontent infoVideo">
            <EditVideoModal {...props} {...editModalObj}
                editSuccess={editSuccess}
                {...videoId}
            ></EditVideoModal>
            
            <HeadlessModal
                {...videoModalObj}
                className="showVideoModal"
                width={800 - 1}
            >
                <video 
                    ref={videoEl}
                    src={videoId.file_url} controls="true" controlslist="nodownload">
                    您的浏览器不支持 video 标签。
                </video>
                <div className="df copyLine">
                    <Input value={_inputValue}
                        className="dark"
                    ></Input>
                    <ActionBtn className="copybtn" data-clipboard-text={_inputValue}>复制视频地址</ActionBtn>
                </div>
            </HeadlessModal>
            <style>{`
                
                /* item */
                .videoPublishSuccess .section {
                    background: #fff;
                    padding: 16px 20px;
                    padding-top: 0px;
                    position: relative;

                    text-align: center;
                    color: ${theme.foreground_tip};
                }
                
                    .videoItem .square-main .buttonRow i {
                        vertical-align: top;
                        font-size: 16px;
                        color: ${theme.foreground_select} !important;
                        margin-left: 6px;
                    }
            `}</style>

            <InfoTab
                {...props}
                categories={[{
                    key: 'all',
                    name: '全部视频'
                }, {
                    key: 'review',
                    name: '待审核视频'
                }]}
                {...categoryObj}

                right={
                    <Button type="primary" icon="upload"
                        onClick={() => { toUpload() }}
                        className="toUploadBtn"
                        
                    >
                        上传视频
                    </Button>
                }
            ></InfoTab>

            <div className="toolbarRow mt20 df">
                <span>
                    共
                    <span style={{color: theme.foreground_orange1}}> {count} </span>
                    个视频
                </span>

                {categoryObj.category == 'all' && <CRoundSelect {...props}
                    width={'88px'}
                    items={_items}
                    onSortChange={onSortChange}
                    sortKey={sortKey }
                ></CRoundSelect>}
            </div>

            {categoryObj.category == 'all' ?
             <div className="itemWrap">
                {videoes.map((item, index) => {
                    return (<VideoInReviewItem
                        {...props}

                        {...item}
                        key={item.id}
                        onEditVideo={onEditVideo}
                        onMaskClick={onMaskClick}
                        getCopyText={getCopyText}
                        
                    >
                    </VideoInReviewItem>)
                })}
            </div>
            :
            <div className="itemWrap">
                {reviewVideoes.map((item, index) => {
                    return (<VideoInReviewItem
                        {...props}

                        {...item}
                        key={item.id}
                        isReview={true}
                    >
                    </VideoInReviewItem>)
                })}
            </div>
            }

            

            {
                categoryObj.category == 'all' && count > PAGE_SIZE && 
                <div className="mt30 mb50 edu-txt-center">
                    <Pagination showQuickJumper total={count} pageSize={PAGE_SIZE} 
                        {...pageObj}
                    />
                </div>
            }
           
        </div>
    )
}

export default InfoVideo

/**
<video src="http://outin-396971199eed11e991a100163e1c7426.oss-cn-shanghai.aliyuncs.com/sv/52943d8b-16c8dc2a8ca/52943d8b-16c8dc2a8ca.mp4" controls="true" controlslist="nodownload" width="400">
您的浏览器不支持 video 标签。
</video>

 */