import {View} from 'react-native'
import React from 'react'
import LdvColorSlider from './ldvColorSlider'
import {hex2Hsv, hsv2Hex} from '../utils'
import LdvPresetView from './ldvPresetView'
import LdvSaturation from './ldvSaturation'
import LdvColorBrightness from './ldvColorBrightness'
import I18n from '../i18n/index'

export interface ColorAdjustViewProps {
  h: number
  s: number
  v: number
  minBrightness?: number // 最小亮度
  minSaturation?: number // 最小Saturation
  reserveSV?: boolean // 保留 s v
  hideSat?: boolean // 隐藏saturation
  onHSVChange?: (h: number, s: number, v: number) => void
  onHSVChangeComplete: (h: number, s: number, v: number) => void
}

const ColorAdjustView = (props: ColorAdjustViewProps) => {
  return (
    <View>
      <LdvColorSlider
        type={'color'}
        title={I18n.getLang('light_sources_tile_sec_lighting_shade')}
        thumbColor={hsv2Hex(props.h, 100, 100)}
        value={props.h}
        onValueChange={hue => {
          props.onHSVChange && props.onHSVChange(hue, props.s, props.v)
        }}
        onSlidingComplete={hue => {
          props.onHSVChangeComplete(hue, props.s, props.v)
        }}/>
      <LdvPresetView
        type={'color'}
        onPress={(item) => {
          const hsv = hex2Hsv(item.color)
          if (hsv) {
            props.onHSVChangeComplete(hsv.h, props.reserveSV ? props.s : hsv.s, props.reserveSV ? props.v : hsv.v)
          }
        }}/>
      {!props.hideSat && <LdvSaturation
        value={props.s}
        minSaturation={props.minSaturation}
        onValueChange={s => {
          props.onHSVChange && props.onHSVChange(props.h, s, props.v)
        }}
        onSlidingComplete={s => {
          props.onHSVChangeComplete(props.h, s, props.v)
        }}/>}
      <LdvColorBrightness
        minBrightness={props.minBrightness}
        value={props.v}
        onValueChange={v => {
          props.onHSVChange && props.onHSVChange(props.h, props.s, v)
        }}
        onSlidingComplete={v => {
          props.onHSVChangeComplete(props.h, props.s, v)
        }}/>
    </View>
  )
}

export default ColorAdjustView