import {Utils} from "tuya-panel-kit";
import React, {useEffect} from "react";
import {Image, StyleSheet, TouchableOpacity, View} from "react-native";
import {useReactive} from "ahooks";
import {hsv2Hex} from "../utils/index";
import ThemeType from "../config/themeType";
import res from "../res";
import { HSV } from "../utils/interface";

const {withTheme} = Utils.ThemeUtils
const cx = Utils.RatioUtils.convertX;

interface DiySceneNodeProps {
  theme?: ThemeType
  isCurrent: boolean
  position: 'Top' | 'Bottom'
  topColor: HSV
  bottomColor: HSV
  onChangePosition: (position: 'Top' | 'Bottom') => void
}

const DiySceneNodeView = (props: DiySceneNodeProps) => {
  const {theme, topColor, bottomColor, isCurrent, position, onChangePosition} = props;
  const state = useReactive({
    halfCircleTopColor: hsv2Hex(topColor.h, Math.max(Math.round(topColor.s / 10), 10), 100),
    halfCircleBottomColor: hsv2Hex(bottomColor.h, Math.max(Math.round(bottomColor.s / 10), 10), 100),
  });

  useEffect(() => {
    state.halfCircleTopColor = hsv2Hex(topColor.h, Math.max(Math.round(topColor.s / 10), 10), 100);
    state.halfCircleBottomColor = hsv2Hex(bottomColor.h, Math.max(Math.round(bottomColor.s / 10), 10), 100);
  }, [JSON.stringify(topColor), JSON.stringify(bottomColor)]);

  const styles = StyleSheet.create({
    circleLayout: {
      marginLeft: cx(10),
      marginVertical: cx(10),
      width: cx(60),
      height: cx(60),
      justifyContent:'space-between',
      alignContent: 'center',
    },
    borderTop: {
      position: 'absolute',
      width: cx(60),
      height: cx(28),
      resizeMode: 'contain',
      top: '-5%',
      zIndex: 2,
      tintColor: theme?.global.fontColor
    },
    borderBottom: {
      position: 'absolute',
      width: cx(60),
      height: cx(28),
      resizeMode: 'contain',
      transform: [{rotate: '180deg'}],
      bottom: '15%',
      zIndex: 2,
      tintColor: theme?.global.fontColor
    },
    halfCircleDown: {
      width: '100%',
      height: cx(30),
    },
    halfCircleUp: {
      width: '100%',
      height: cx(30)
    }
  });
  return (
    <View style={styles.circleLayout}>
      <TouchableOpacity
        style={styles.halfCircleUp}
        onPress={() => {
          onChangePosition("Top")
        }}>
        <Image source={res.halfcircle} style={{
          width: cx(60),
          height: cx(25),
          resizeMode: 'contain',
          tintColor: state.halfCircleTopColor
        }}/>
        { (isCurrent && position === 'Top') && <Image source={res.halfborder} style={styles.borderTop} />}
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.halfCircleDown}
        onPress={() => {
          onChangePosition("Bottom")
        }}>
        <Image source={res.halfcircle} style={{
          width: cx(60),
          height: cx(25),
          resizeMode: 'contain',
          transform: [{rotate: '180deg'}],
          tintColor: state.halfCircleBottomColor
        }}/>
        {(isCurrent && position === 'Bottom') && <Image source={res.halfborder} style={styles.borderBottom} />}
      </TouchableOpacity>
    </View>)
}

export default withTheme(DiySceneNodeView)
