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
}
type IndexType = {
  onSelect?: (val: boolean) => void
} & ParamType
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] = { ...state.list[index], checked: status }
    state.list[index].color_list?.map((citem, cindex) => {
      state.list[index].color_list[cindex] = { ...state.list[index].color_list[cindex], checked: status }
    })
    dispatch({ type: 'updateProduct', data: { list: state.list } })
  }, [state.list[index]])

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

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