import { ChangeEvent } from 'react'

import { useRecoilState } from 'recoil'

import { playerMatchesState } from '../../storeHighlightsAtoms'

export const useHighlighMatches = () => {
  const [playerMatches, setPlayerMatches] = useRecoilState(playerMatchesState)

  const onChangeSelectedMatches = ({ target }: ChangeEvent<HTMLInputElement>) => setPlayerMatches(
    (prev) => prev.map(
      (match) => (Number(match.id) === Number(target.id)
        ? { ...match, isChecked: !match.isChecked } : match),
    ),
  )

  return {
    onChangeSelectedMatches,
    playerMatches,
  }
}
