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

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

export enum PaintMode {
    Top,
    Bottom,
    ALL
}

interface BallDirectionProps {
    theme?: any,
    adjustType: AdjustType,
    paintMode: PaintMode,
    onPaintModeChanged: (paintMode: PaintMode) => void,
    topColor: HSV,
    bottomColor: HSV,
    colorTemp: number,
    brightness: number,
}

const BallDirectionView = (props: BallDirectionProps) => {
    const {theme, adjustType, paintMode, onPaintModeChanged, topColor, bottomColor, colorTemp, brightness} = props;
    const state = useReactive({
        adjustType: adjustType,
        paintMode: paintMode,
        halfCircleTopColor: '#ff0000',
        halfCircleBottomColor: '#00ff00',
    });

    useEffect(() => {
        state.adjustType = adjustType;
        state.paintMode = paintMode;
        if (state.adjustType === AdjustType.COLOUR) {
            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);
        } else if (state.adjustType === AdjustType.WHITE) {
            state.halfCircleTopColor = cctToColor(colorTemp, brightness);
            state.halfCircleBottomColor = cctToColor(colorTemp, brightness);
        } else {
            state.halfCircleTopColor = '#FEAC5B';
            state.halfCircleBottomColor = '#FEAC5B';
        }
    }, [adjustType, paintMode, JSON.stringify(topColor), JSON.stringify(bottomColor), colorTemp, brightness]);

    const styles = StyleSheet.create({
        root: {
            flexDirection: 'row',
            width: '100%',
            alignItems: 'center',
            justifyContent: 'center'
        },
        paintModeRoot: {
            flexDirection: 'column',
            position: 'absolute',
            left: cx(24)
        },
        paintModeAll: {
            resizeMode: 'contain',
            width: '100%',
            height: '100%',
            tintColor: state.paintMode === PaintMode.ALL ? props.theme?.icon.primary : props.theme?.icon.normal
        },
        paintModeHalf: {
            resizeMode: 'contain',
            width: '100%',
            height: '100%',
            tintColor: state.paintMode !== PaintMode.ALL ? props.theme?.icon.primary : props.theme?.icon.normal
        },
        circleLayout: {
            marginVertical: cx(10),
            width: cx(180),
            height: cx(180)
        },
        circleBorder: {
            position: 'absolute',
            width: '84%',
            height: '84%',
            borderColor: theme?.textInput.line,
            borderRadius: 100,
            borderWidth: 2,
            bottom: '8%',
            left: '8%',
            right: '8%',
            top: '8%',
        },
        coloring: {
            width: '100%',
            height: '100%',
            resizeMode: 'contain',
        },
        ringUp: {
            position: 'absolute',
            width: '100%',
            height: '56%',
            resizeMode: 'contain',
            transform: [{ rotate: '180deg' }]
        },
        ringDown: {
            position: 'absolute',
            width: '100%',
            height: '56%',
            resizeMode: 'contain',
            bottom: 0
        },
        halfCircleDown: {
            position: 'absolute',
            width: '60%',
            left: '20%',
            right: '20%',
            bottom: '11%',
        },
        halfCircleUp: {
            position: 'absolute',
            width: '60%',
            left: '20%',
            right: '20%',
            top: '11%',
        }
    });
    return (<View style={styles.root}>
        <View style={styles.paintModeRoot}>
            {state.adjustType === AdjustType.COLOUR &&
                <TouchableOpacity style={{width: cx(40), height: cx(40)}} onPress={() => {
                    onPaintModeChanged(PaintMode.Top);
                }}>
                    <Image source={res.half} style={styles.paintModeHalf}/>
                </TouchableOpacity>}
            <TouchableOpacity
                style={{width: cx(40), height: cx(40), marginTop: cx(10),}}
                onPress={() => {
                    onPaintModeChanged(PaintMode.ALL);
                }}>
                <Image source={res.all} style={styles.paintModeAll}/>
            </TouchableOpacity>
        </View>
        <View style={styles.circleLayout}>
            <View style={styles.circleBorder}/>
            {state.paintMode === PaintMode.ALL &&
                <Image source={res.coloring} style={styles.coloring}/>}
            {state.paintMode === PaintMode.Top &&
                <Image source={res.ringdown} style={styles.ringUp}/>}
            {state.paintMode === PaintMode.Bottom &&
                <Image source={res.ringdown} style={styles.ringDown}/>}
            <TouchableOpacity
                style={styles.halfCircleUp}
                disabled={state.paintMode === PaintMode.ALL}
                onPress={() => {
                    onPaintModeChanged(PaintMode.Top);
                }}>
                <Image source={res.halfcircle} style={{
                    width: '100%',
                    resizeMode: 'contain',
                    tintColor: state.halfCircleTopColor
                }}/>

            </TouchableOpacity>

            <TouchableOpacity
                style={styles.halfCircleDown}
                disabled={state.paintMode === PaintMode.ALL}
                onPress={() => {
                    onPaintModeChanged(PaintMode.Bottom);
                }}>
                <Image source={res.halfcircle} style={{
                    width: '100%',
                    resizeMode: 'contain',
                    transform: [{rotate: '180deg'}],
                    tintColor: state.halfCircleBottomColor
                }}/>
            </TouchableOpacity>
        </View>
    </View>)
}

export default withTheme(BallDirectionView) as React.ComponentType<BallDirectionProps>
