import { StyleSheet, View } from 'react-native'
import React, { memo } from 'react'
import { Utils } from 'tuya-panel-kit'
import { useReactive } from 'ahooks'
import Spacer from './Spacer'
import ColorAdjustView from './ColorAdjustView'
import ColorTempAdjustView from './ColorTempAdjustView'
import SegmentControl from './segmentControl'
import I18n from '../i18n/index'

const { convertX: cx } = Utils.RatioUtils

export interface HSV {
  h: number
  s: number
  v: number
}

interface LampConfigViewProps {
  isSupportColor: boolean
  isSupportCCT: boolean
  isSupportBrightness: boolean
  isColorMode: boolean
  setIsColorMode: (isColorMode: boolean) => void
  minBrightness?: number // 最小亮度
  minSaturation?: number // 最小Saturation
  reserveSV?: boolean // 保留 s v
  hsv: HSV
  onHSVChange: (hsv: HSV, isComplete: boolean) => void
  cct: number
  onCCTChange: (cct: number, isComplete: boolean) => void
  brightness: number
  onBrightnessChange: (brightness: number, isComplete: boolean) => void
}

const LampAdjustView2 = (props: LampConfigViewProps) => {

  const state = useReactive({
    hasSegmentControl: props.isSupportColor && (props.isSupportBrightness || props.isSupportCCT),
  })

  return (
    <View>
      {state.hasSegmentControl &&
        <SegmentControl
          style={styles.segmentControl}
          title1={I18n.getLang('light_sources_tile_rgb_lighting_tab_color')}
          title2={I18n.getLang('light_sources_tile_rgb_lighting_tab_white')}
          isFirst={props.isColorMode}
          setIsFirst={props.setIsColorMode}/>
      }
      {((state.hasSegmentControl && props.isColorMode) || (!state.hasSegmentControl && props.isSupportColor)) &&
        <>
          {state.hasSegmentControl && <Spacer height={cx(10)}/>}
          <ColorAdjustView
            h={props.hsv.h}
            s={props.hsv.s}
            v={props.hsv.v}
            minBrightness={props.minBrightness}
            minSaturation={props.minSaturation}
            reserveSV={props.reserveSV}
            onHSVChange={(h, s, v) => {
              props.onHSVChange({ h, s, v }, false)
            }}
            onHSVChangeComplete={(h, s, v) => {
              props.onHSVChange({ h, s, v }, true)
            }}/>
          <Spacer/>
        </>
      }
      {((state.hasSegmentControl && !props.isColorMode) || (!state.hasSegmentControl && (props.isSupportBrightness || props.isSupportCCT))) &&
        <>
          {state.hasSegmentControl && <Spacer height={cx(10)}/>}
          <ColorTempAdjustView
            minBrightness={props.minBrightness}
            isSupportTemperature={props.isSupportCCT}
            isSupportBrightness={props.isSupportBrightness}
            colorTemp={props.cct}
            brightness={props.brightness}
            onCCTChange={cct => {
              props.onCCTChange(cct, false)
            }}
            onCCTChangeComplete={cct => {
              props.onCCTChange(cct, true)
            }}
            onBrightnessChange={brightness => {
              props.onBrightnessChange(brightness, false)
            }}
            onBrightnessChangeComplete={brightness => {
              props.onBrightnessChange(brightness, true)
            }}/>
          <Spacer/>
        </>
      }
    </View>
  )
}

const styles = StyleSheet.create({
  segmentControl: {
    marginHorizontal: cx(16),
  },
})

export default memo(LampAdjustView2)