import React, {useEffect} from 'react'
import {StyleProp, StyleSheet, Text, TextProps, View, ViewStyle} from 'react-native'
import {LinearGradient, Slider, Utils} from 'tuya-panel-kit'
import {Rect} from 'react-native-svg'
import {useReactive} from 'ahooks'

const cx = Utils.RatioUtils.convertX

const temperatures = {
  '0%': 'rgb(254, 172, 90)',
  '22%': 'rgb(249, 209, 164)',
  '41%': 'rgb(254, 244, 223)',
  '60%': 'rgb(252, 250, 242)',
  '80%': 'rgb(226, 235, 248)',
  '100%': 'rgb(194, 217, 254)',
}

interface LdvTemperatureSliderProps {
  title: string
  onSlidingComplete: (number) => void
  thumbColor: string
  value: number
  width?: number | undefined
  style?: StyleProp<ViewStyle> | undefined
  titleStyle?: StyleProp<TextProps> | undefined
  subTitleStr?: string | undefined
}

const LdvTemperatureSlider = (props: LdvTemperatureSliderProps) => {
  const {title, onSlidingComplete, thumbColor, value, titleStyle} = props
  let dataSource = temperatures
  let max = 100
  let min = 0
  const width = props.width || (Utils.RatioUtils.width - cx(80))

  const state = useReactive({
    value: value,
  })
  useEffect(() => {
    state.value = value
  }, [value])

  return (
    <View style={[styles.container, props.style]}>
      <View style={styles.titleBg}>
        <Text style={[styles.title, titleStyle]}>
          {title}
        </Text>
      </View>
      <Slider.Horizontal
        style={{...styles.shadeSlider, width}}
        styles={{track: styles.sliderTrack, thumb: {...styles.shadeThumb, backgroundColor: thumbColor}}}
        maximumValue={max}
        minimumValue={min}
        value={value}
        stepValue={1}
        canTouchTrack={true}
        theme={{
          trackRadius: cx(15),
        }}
        onlyMaximumTrack={true}
        renderMaximumTrack={() => {
          return (
            <View style={{flex: 1, borderRadius: cx(15)}}>
              <LinearGradient
                style={{...styles.sliderLinearGradient, width}}
                x1="0%"
                y1="0%"
                x2="100%"
                y2="0%"
                stops={dataSource}>
                <Rect {...styles.sliderLinearGradient} width={width}/>
              </LinearGradient>
            </View>
          )
        }}
        onValueChange={(value) => {
          state.value = value
        }}
        onSlidingComplete={onSlidingComplete}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    height: cx(57),
    flexDirection: 'column',
    paddingHorizontal: cx(16),
  },
  titleBg: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  valueText: {
    marginTop: cx(10),
    fontSize: cx(14),
    color: '#000',
    fontFamily: 'helvetica_neue_lt_std_roman',
  },
  title: {
    marginTop: cx(4),
    fontSize: cx(14),
    color: '#000',
    fontFamily: 'helvetica_neue_lt_std_roman',
  },
  shadeSlider: {
    marginTop: cx(8),
    height: cx(28),
    justifyContent: 'center',
  },
  sliderTrack: {
    marginTop: cx(9),
    marginBottom: cx(9),
    flex: 1,
    borderRadius: cx(15),
  },
  shadeThumb: {
    backgroundColor: 'rgb(0, 249, 255)',
    width: cx(28),
    height: cx(28),
    borderRadius: cx(14),
    borderColor: 'white',
    borderWidth: 1,
    shadowColor: '#000000',
    shadowOpacity: 0.2,
    shadowRadius: cx(8),
    elevation: cx(8),
    shadowOffset: {
      width: 0,
      height: cx(4),
    },
  },
  sliderLinearGradient: {
    height: cx(12),
  },
})

export default LdvTemperatureSlider