import React, { useContext, useState } from 'react'
import PropTypes from 'prop-types'
import style from './SwitcherEditDeck.scss'
import { MobileContext } from '../container/App'

const SwitcherEditDeck = ({ btns, onClick, value }) => {
    const isMobile = useContext(MobileContext)
    const [tooltipVisible, setTooltipVisible] = useState(null)
    return <div className={style.wrap_all}>
        {btns.map((btn, i) => {
            const isValue = btn.id === 'off' ? value === 'none' : btn.id === value
            return <div
                key={btn.id}
                className={style.wrap}
            >
                <div
                    aria-checked={isValue}
                    className={isValue ? style[`select_${btn.id}`] : style[`main_${btn.id}`]}
                    role={'checkbox'}
                    tabIndex={0}
                    onClick={() => onClick(btn.id)}
                    onKeyDown={(e) => e.key === 'Enter' && onClick(btn.id)}
                    onMouseEnter={() => {
                        setTooltipVisible(i)
                    }}
                    onMouseLeave={() => {
                        setTooltipVisible(null)
                    }}
                />
                {(!isMobile && tooltipVisible === i) && (<span
                    className={style.tooltip}
                    style={{ 'width': `${btn.width}px` }}
                >{btn.label}</span>)}
            </div>
        })}
    </div>
}

SwitcherEditDeck.propTypes = {
    btns: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.string,
            label: PropTypes.string,
            width: PropTypes.string
        })
    ),
    value: PropTypes.string,
    onClick: PropTypes.func()
}

export default React.memo(SwitcherEditDeck)