import { View, Image } from '@tarojs/components'
import './index.less'
import ColorPicker from "@/components/color-picker";
import { useEffect, useState } from 'react';
import history from "../../assets/history.png";
import Taro from '@tarojs/taro';
import { hex, strInsert } from '@/utils/sendOrder';
import BLESDK from '@/utils/ble'
import router from '@/baseRouter/index'

export default function Index() {
  const [list, setList] = useState(["255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255"])
  const [open, setOpen] = useState(false)
  const [curColor, setCurColor] = useState({
    hex: '#ff0000',
    rgba: '255, 0, 0'
  })
  const toPage = () => {
    router.navigate('/pages/history/index').then((data) => {
      setList([...data])
    })
  }
  const handleColorPicker = (e) => {
    console.log(e);

    if (e) {
      setCurColor(e)
    }
    setOpen(false)
  }
  const addColor = (index) => {
    setList((state) => {
      state[index] = curColor.rgba
      return [...state]
    })
  }
  const submit = () => {
    let str = '7B55EA10B2'
    for (let i = 0; i < list.length; i++) {
      const item = list[i].split(',')
      str += hex(item[0])
      str += hex(item[1])
      str += hex(item[2])
      str += hex(1)
    }
    BLESDK.writeBleValue(new Uint8Array(strInsert(str)).buffer)
    setTimeout(() => {
      router.back()
    }, 800)
  }
  const saveTemplate = () => {
    let historyList = Taro.getStorageSync('colorList') || []
    if (historyList.length > 10) {
      historyList[0] = list
    } else {
      historyList.unshift(list)
    }
    Taro.setStorageSync('colorList', historyList)
    Taro.showToast({
      title: '保存成功',
      icon: "none",
    })
  }

  return (
    <View className="index">
      <View className='head'>
        <View className='head-left'>像素跳动</View>
        <View className='head-right' onClick={toPage}>  <Image className='icon' src={history} />模板列表</View>
      </View>
      <View className="grid">
        {list.map((item, index) => <View className="grid-item" style={{ backgroundColor: `rgb(${item})` }} key={index} onClick={() => addColor(index)}></View>)}
      </View >

      <View className='colorbox'>
        <View className='colorbox-icon' onClick={() => setOpen(true)}></View>
        <View className='colorbox-btn' style={{ backgroundColor: curColor.hex }} onClick={() => setOpen(true)}>{curColor.hex}</View>
      </View>
      <View className='hint'>*请选取喜欢的颜色，再点击小方格填入颜色；</View>
      <View className='btns'>
        <View className='btn' onClick={saveTemplate}>保存模板</View>
        <View className='btn' onClick={submit}>传输到音响屏幕</View>
      </View>
      <ColorPicker open={open} onChange={handleColorPicker} />
    </View >
  )
}