import styles from './style.module.css'
import Image from 'next/image'
import React, { useState, useEffect, useRef } from 'react'
import { useTranslation } from 'next-i18next'

interface Iprops {
    selectTaskWay: (value: boolean) => void
}
const BatchTask = ({ selectTaskWay }: Iprops) => {
    const { t } = useTranslation('studio')
    const [showBatch, setShowBatch] = useState(false)
    const currentRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            const target = event.target as HTMLElement
            if (currentRef.current && !currentRef.current.contains(target)) {
                setShowBatch(false)
            }
        }
        document.addEventListener('mousedown', handleClickOutside)
        return () => {
            document.removeEventListener('mousedown', handleClickOutside)
        }
    }, [currentRef])

    return (
        <div
            className={`ag14 ${styles.batchTask}`}
            ref={currentRef}
            onClick={() => {
                setShowBatch(true)
            }}
        >
            <Image
                src="/more.svg"
                alt="loading"
                width={16}
                height={16}
                className={styles.batchIcon}
            ></Image>
            {showBatch ? (
                <div className={styles.batchWrap}>
                    <div
                        className={styles.batchItem}
                        onClick={() => {
                            selectTaskWay(true)
                            setShowBatch(false)
                        }}
                    >
                        <span className={styles.item}>{t('newBatchTask')}</span>
                    </div>
                </div>
            ) : null}
        </div>
    )
}

export default BatchTask
