import { memo, useCallback } from 'react'
import MCheckbox from '@/components/checkbox'
import type { ProductType } from '@/context/ContextShop'
import { useCurrenShop } from '@/context/ContextShop'

interface ParamType {
  productItem: ProductType
}
interface IndexType {
  onSelect?: (val: boolean) => void
  checkStatus: boolean
}
export default memo((props: ParamType) => {
  const { productItem } = props
  const { state, dispatch } = useCurrenShop()
  const index = productItem.index_str.split(',')[0]
  const onSelect = useCallback((status) => {
    state.list[index].checked = status
    state.list[index].color_list?.map((citem, cindex) => citem.checked = status)
    dispatch({ type: 'updateProduct', data: { list: state.list } })
  }, [state.list[index].checked])

  return <Index checkStatus={state.list[index].checked} onSelect={onSelect} />
})

const Index = memo((props: IndexType) => {
  const { checkStatus, onSelect } = props
  const setSelect = (status) => {
    onSelect?.(status)
  }
  return <MCheckbox status={checkStatus} onSelect={() => setSelect(true)} onClose={() => setSelect(false)} />
})
