// 浏览组件工具栏
import React, { useRef, useState } from 'react'
import { classNames, downloadFile } from '../../renderers/Lion/utils/utils'
import { MediaItem } from '../ImageGallery'

interface IProps {
    unionSelecting: boolean,
    mediaListShow: boolean,
    mediaList: Array<MediaItem>,
    currentIndex: number,
    handleUnionSelecting: (show: boolean) => void,
    toggleMediaListShow: () => void,
    handleRotate: (type: 'clockwise' | 'anticlockwise') => void,
    next: () => void,
    prev: () => void,
}

interface UtilsItem {
    name: string;
    show: boolean;
    icon: string;
    disabled?: boolean;
    selected?: boolean;
    action?: () => void;
}

const ViewerUtils: React.FC<IProps> = (props) => {

    const {
        unionSelecting,
        mediaListShow,
        mediaList,
        currentIndex,
        handleUnionSelecting,
        toggleMediaListShow,
        handleRotate,
        next,
        prev,
    } = props;

    const notImage = mediaList.every(_ => _.isNotImg)
    const currentMedia = mediaList[currentIndex]
    const currentMediaIsImg = !currentMedia?.isNotImg
    console.log(mediaList)

    // 控制面板显示隐藏
    const [showUtils, setShowUtils] = useState<boolean>(true);
    // 面板显示隐藏定时器
    const timeOutRef = useRef<any>(null);
    // 工具列表
    const utilsList: UtilsItem[] = [
        { name: '上一张', disabled: currentIndex === 0, show: true, icon: 'fa-chevron-left', action: prev },
        { name: '下一张', disabled: currentIndex === mediaList.length - 1, show: true, icon: 'fa-chevron-right', action: next },
        {
            name: '下载',
            show: true,
            icon: 'fa-download',
            action: () => {
                downloadFile(currentMedia.downloadSrc || currentMedia.originalSrc, currentMedia.title)
            }
        },
        {
            name: '并图',
            show: notImage ? false : true,
            icon: 'fa-files-o',
            selected: unionSelecting,
            action: () => {
                handleUnionSelecting(!unionSelecting)
            }
        },
        { name: '逆时针', show: currentMediaIsImg, icon: 'fa-rotate-left', action: () => { handleRotate('anticlockwise') } },
        { name: '顺时针', show: currentMediaIsImg, icon: 'fa-rotate-right', action: () => { handleRotate('clockwise') } },
        {
            name: '显示列表',
            show: true,
            icon: ' fa-list',
            selected: mediaListShow,
            action: toggleMediaListShow
        }
    ]

    // 控制面板是否显示
    const handleUtilsShow = (visible: boolean) => {
        if (visible) {
            timeOutRef.current && clearTimeout(timeOutRef.current)
            !showUtils && setShowUtils(true)
        } else {
            timeOutRef.current = setTimeout(() => {
                setShowUtils(false)
            }, 2000)
        }
    }

    return <div
        className="viewerUtilsWrapper"
        onMouseOver={() => { handleUtilsShow(true) }}
        onMouseLeave={() => { handleUtilsShow(false) }}
    >
        {
            showUtils &&
            <div className="centerContent">
                <div className="actionListWrapper">
                    {
                        utilsList.filter(item => item.show).map((utilItem, utilIndex) => {
                            return <div
                                className={classNames(
                                    "utilItemWrapper",
                                    utilItem.selected && "utilItemWrapper_selected",
                                    utilItem.disabled && "utilItemWrapper_disabled"
                                )}
                                key={utilIndex}
                                onClick={() => {
                                    !utilItem.disabled && utilItem.action?.();
                                }}
                            >

                                <i className={`fa ${utilItem.icon}`}></i>
                            </div>
                        })
                    }
                </div>
            </div>
        }
    </div>
}

export default ViewerUtils;