import React, { useState, useCallback } from 'react';
import { utils } from '@ray-js/panel-sdk';
import { getElementById } from '@ray-js/api';
import { View, Text, Slider, Image, usePageEvent } from '@ray-js/ray';
import styles from './index.module.less';
import { Props } from './index.type';
import imgs from '../../res';

const { hsv2rgbString } = utils;

const HubColorCircle: React.FC<Props> = props => {
  const dpState = props.DpStateData;
  const codeMap = props.DpCodesMap;

  const LED_SIZE = 110;
  const HUE_RADIUS = 135;
  const HUE_INNER_RADIUS = 76;
  const THUMB_RADIUS = 27.5;
  const THUMB_INNER_RADIUS = 22.5;

  const hue = 180;
  const brightness = 500;
  const saturation = 500;

  const [styleState, setStyleState] = useState({
    container: {
      flex: 1,
      alignSelf: 'stretch',
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 40,
    },

    displayView: {
      width: HUE_RADIUS * 2,
      height: HUE_RADIUS * 2,
    },

    led: {
      left: (HUE_RADIUS * 2 - LED_SIZE) * 0.5,
      top: (HUE_RADIUS * 2 - LED_SIZE) * 0.5,
      width: LED_SIZE,
      height: LED_SIZE,
      borderRadius: LED_SIZE * 0.5,
      backgroundColor: 'transparent',
    },

    controlView: {
      height: 120,
      alignSelf: 'stretch',
      justifyContent: 'space-around',
      marginTop: 15,
    },
  });

  const toParseInt = (value: number): number => {
    return Math.floor(value);
  };

  const handleColorChange = useCallback(
    (value, type) => {
      let h = 0;
      let s = saturation;
      let v = brightness;
      switch (type) {
        case 'hue':
          h = value;
          break;
        case 'saturation':
          s = value;
          break;
        case 'brightness':
          v = value;
          break;
        default:
          break;
      }
      updatePreview(h, s, v);
      // putControlDataDP(h, s, v);
    },
    [hue, saturation, brightness]
  );

  const updatePreview = (h: number, s: number, v: number) => {
    const backgroundColor = hsv2rgbString(h, s, v);
    const data = { ...styleState };
    data.setStyleState({
      ...backgroundColor,
      backgroundColor,
    });
  };

  // 长度不够补齐位数
  const format = (value: string, len = 2) => {
    let v = `${value}`;
    if (v.length < len) {
      v = '0'.repeat(len - v.length) + v;
    } else {
      v = v.slice(0, len);
    }
    return v;
  };
  // m: mode; h: hue; s: saturation; v: lightValue; b: whiteBright; k: kelvin;
  // mode: 0 - 跳变; 1 - 呼吸;
  const encodeControlData = (m: number, h: number, s: number, v: number, b: number, k: number) => {
    const hsvbk = [h, s, v, b, k].reduce((total: string, next: number) => {
      let cur = parseInt(`${next}`, 10).toString(16);
      cur = format(cur, 4);
      return total + cur;
    }, '');
    return m + hsvbk;
  };

  return (
    <View className={styles.box}>
      <View className={styles.header}>
        <View style={styleState.displayView}>
          <View className={styles.led} style={styleState.led} />
        </View>
      </View>
      <View className={styles.panel}>
        <View className={styles.configList}>
          <View className={styles.configList}>
            <Image src={imgs.icon_bhd} className={styles.icoImg} />
            <View className={styles.slider}>
              <Slider
                activeColor="#fff"
                backgroundColor="#333333"
                min={0}
                max={1000}
                step={1}
                value={brightness}
                onChange={e => handleColorChange(e.value, 'brightness')}
              />
            </View>
            <Text className={styles.SliderValue}>
              {toParseInt(
                (dpState.temp_value /
                  (codeMap.temp_value.property.max - codeMap.temp_value.property.min)) *
                  100
              )}
              %
            </Text>
          </View>
        </View>
      </View>
    </View>
  );
};