import { Text, View } from '@tarojs/components'
import Taro, { getCurrentPages, useDidHide } from '@tarojs/taro'
import { useEffect, useState, useTransition } from 'react'
import ColorItemSetting from '../../../components/colorItemSetting'
import styles from './index.module.scss'
import { useCurrenCode } from '@/context/ContextCodeSetting'
import LoadingCard from '@/components/loadingCard'

export default () => {
  const { dispatch, productData } = useCurrenCode()
  const cancel = () => {
    Taro.navigateBack()
  }
  const submit = () => {
    const index = productData.color_item_data.index_str.split(',')[0]
    productData.data.product_details[index] = productData.color_item_data
    dispatch({ type: 'updateData', data: { ...productData.data }, update_status: 1 })
    Taro.navigateBack()
  }
  const [colorData, setColorData] = useState([])
  const [isPending, startTransition] = useTransition()
  useEffect(() => {
    startTransition(() => {
      setColorData(productData.color_item_data)
    })
    return () => {
      dispatch({ type: 'updateColorData', data: null })
    }
  }, [])

  return <View className={styles.main}>
    {isPending || colorData.length == 0
      ? <View className={styles.loading_card}><LoadingCard /></View>
      : <ColorItemSetting productInfo={colorData} />}
    <View >
      <View className={styles.bottom_btn}>
        <Text onClick={cancel}>取消</Text>
        <Text onClick={submit}>确认</Text>
      </View>
      <View className="common_safe_area_y"></View>
    </View>
  </View>
}
