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, {ColorAdjustViewProps} from './ColorAdjustView'
import ColorTempAdjustView, {ColorTempAdjustViewProps} from './ColorTempAdjustView'
import SegmentControl from './segmentControl'
import I18n from '../i18n/index'

const {convertX: cx} = Utils.RatioUtils

interface LampConfigViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
  isColorMode: boolean
  isSupportColor: boolean
  setIsColorMode: (isColorMode: boolean) => void
}

const LampAdjustView = (props: LampConfigViewProps) => {

  const state = useReactive({
    hasSegmentControl: props.isSupportColor && (props.isSupportBrightness || props.isSupportTemperature),
  })
  
  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.h}
                  s={props.s}
                  v={props.v}
                  minBrightness={props.minBrightness}
                  minSaturation={props.minSaturation}
                  reserveSV={props.reserveSV}
                  onHSVChange={props.onHSVChange}
                  onHSVChangeComplete={props.onHSVChangeComplete}/>
              <Spacer/>
          </>
      }
      {((state.hasSegmentControl && !props.isColorMode) || (!state.hasSegmentControl && (props.isSupportBrightness || props.isSupportTemperature))) &&
          <>
            {state.hasSegmentControl && <Spacer height={cx(10)}/>}
              <ColorTempAdjustView
                  minBrightness={props.minBrightness}
                  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/>
          </>
      }
    </View>
  )
}

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

export default memo(LampAdjustView)