import React from 'react'
import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
import {LinearGradient, Slider, Utils} from 'tuya-panel-kit'
import {Rect} from 'react-native-svg'
import ThemeType from '../config/themeType'

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

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)',
}

const colors = {
  '0%': 'rgb(255, 0, 0)',
  '17%': 'rgb(249, 238, 0)',
  '35%': 'rgb(96, 255, 66)',
  '55%': 'rgb(0, 249, 255)',
  '65%': 'rgb(43, 0, 255)',
  '80%': 'rgb(180, 0, 255)',
  '100%': 'rgb(255, 0, 0)',
}

export const TEMP_KEY = 'temperature'

interface LdvColorSliderProps {
  theme?: ThemeType
  title: string,
  type: string,
  onValueChange?: (number) => void | undefined,
  onSlidingComplete: (number) => void,
  thumbColor: string,
  value: number,
  width?: number | undefined,
  style?: StyleProp<ViewStyle> | undefined
}

const LdvColorSlider = (props: LdvColorSliderProps) => {
  const {title, type, onSlidingComplete, thumbColor, value} = props
  let dataSource = type === TEMP_KEY ? temperatures : colors
  let max = type === TEMP_KEY ? 100 : 359
  let min = type === TEMP_KEY ? 0 : 0
  const width = props.width || (Utils.RatioUtils.width - cx(80))

  const styles = StyleSheet.create({
    container: {
      height: cx(57),
      flexDirection: 'column',
      paddingStart: cx(16),
    },
    title: {
      marginTop: cx(4),
      fontSize: cx(14),
      color: props.theme?.global.fontColor,
      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),
    },
    presetView: {
      height: cx(60),
    },
  })

  return (
    <View style={[styles.container, props.style]}>
      <Text style={styles.title}>
        {title}
      </Text>
      <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={props.onValueChange}
        onSlidingComplete={onSlidingComplete}
      />
    </View>
  )
}

export default withTheme(LdvColorSlider)
