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(btns.reduce((acc, btn) => ({ ...acc, [btn.id]: false }), {}))
    const toogleVisible = (key, action) => {
        const res = Object.keys(tooltipVisible).reduce((acc, item) => {
            switch (action) {
                case 'show': {
                    return item === key ? { ...acc, [item]: true } : { ...acc, [item]: false }
                }
                case 'hide': {
                    return { ...acc, [item]: false }
                }
                default:
                    break
            }
        }, {})
        return res
    }
    return <div className={style.wrap_all}>
        {btns.map(btn => {
            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(toogleVisible(btn.id, 'show'))}
                    onMouseLeave={() => setTooltipVisible(toogleVisible(btn.id, 'hide'))}
                />
                {(!isMobile && tooltipVisible[btn.id]) && (<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)