import React from "react";
import {Image, Text, TouchableOpacity, View} from "react-native";
import ColorAdjustView, {ColorAdjustViewProps} from "./ColorAdjustView";
import ColorTempAdjustView, {ColorTempAdjustViewProps} from "./ColorTempAdjustView";
import Spacer from "./Spacer";
import {TabBar, Utils} from "tuya-panel-kit";
import ThemeType from '../config/themeType'
import res from "../res";
import { AdjustType, DiySceneInfo } from "../utils/interface";

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

type TabsNode = {
  key: AdjustType
  title: string
}

interface MoodStripAdjustViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
  theme?: ThemeType
  lampTabs: TabsNode[]
  activeKey: AdjustType
  onActiveKeyChange: (key: AdjustType) => void
  favoriteScenes: DiySceneInfo[]
  onFavoriteSceneChange: (sceneInfo: DiySceneInfo) => void
  onFavoriteSceneRemove?: (sceneInfo: DiySceneInfo) => void
}

const MoodStripAdjustView = (props: MoodStripAdjustViewProps) => {
  return (
    <View style={{width: '100%'}}>
      <TabBar
        type='radio'
        tabs={props.lampTabs}
        style={{
          borderRadius: cx(8),
          backgroundColor: props.theme?.segment.background,
          height: cx(40),
          marginHorizontal: cx(16)
        }}
        tabTextStyle={{color: props.theme?.segment.fontColor}}
        tabActiveTextStyle={{color: props.theme?.segment.fontColor, fontWeight: 'bold'}}
        activeColor={props.theme?.segment.active}
        activeKey={props.activeKey}
        onChange={props.onActiveKeyChange}
      />
      {
        props.activeKey === AdjustType.COLOUR &&
          <>
              <Spacer height={cx(10)}/>
              <ColorAdjustView
                  h={props.h}
                  s={props.s}
                  v={props.v}
                  minSaturation={1}
                  reserveSV={true}
                  onHSVChange={props.onHSVChange}
                  onHSVChangeComplete={props.onHSVChangeComplete}/>
              <Spacer/>
          </>
      }
      {
        props.activeKey === AdjustType.WHITE &&
          <>
              <Spacer height={cx(10)}/>
              <ColorTempAdjustView
                  minBrightness={1}
                  isSupportTemperature={props.isSupportTemperature}
                  isSupportBrightness={props.isSupportBrightness}
                  colorTemp={props.colorTemp}
                  brightness={props.brightness}
                  onCCTChange={props.onCCTChange}
                  onCCTChangeComplete={props.onCCTChangeComplete}
                  onBrightnessChange={props.onBrightnessChange}
                  onBrightnessChangeComplete={props.onBrightnessChangeComplete}/>
              <Spacer/>
          </>
      }
      {
        props.activeKey === AdjustType.LOVE &&
          <View style={{marginVertical: cx(12), marginHorizontal: cx(16), flexDirection: 'row', flexWrap: 'wrap'}}>
            {
              props.favoriteScenes.map((sceneInfo: DiySceneInfo) => {
                return (
                  <TouchableOpacity
                    key={sceneInfo.id}
                    onPress={() => {
                      props.onFavoriteSceneChange(sceneInfo)
                    }}
                  >
                    <View style={{
                      width: cx(54),
                      height: cx(54),
                      borderRadius: cx(5),
                      marginHorizontal: cx(2),
                      marginVertical: cx(2),
                      justifyContent: 'center',
                      alignItems: 'center',
                      backgroundColor: props.theme?.container.background
                    }}>
                      {
                        sceneInfo.id === -1 ?
                          <Image source={res.cycle} style={{width: cx(50), height: cx(50)}}/> :
                          <View style={{justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%'}}>
                            {props.favoriteScenes.length > 3 &&
                                <TouchableOpacity
                                    style={{position: 'absolute', top: cx(5), right: cx(5)}}
                                    onPress={() => {
                                      props.onFavoriteSceneRemove && props.onFavoriteSceneRemove(sceneInfo)
                                    }}>
                                    <Image source={res.minus} style={{width: cx(10), height: cx(10), tintColor: props.theme?.icon.primary}}/>
                                </TouchableOpacity>
                            }
                            <Text style={{fontSize: cx(8), color: props.theme?.global.fontColor}}>{sceneInfo.name}</Text>
                          </View>
                      }
                    </View>
                  </TouchableOpacity>
                )
              })
            }
          </View>
      }
    </View>
  )
}

export default withTheme(MoodStripAdjustView) as React.ComponentType<MoodStripAdjustViewProps>
