import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {Utils} from 'tuya-panel-kit'

const {convertX: cx} = Utils.RatioUtils

const temperatures = [
  {
    color: 'rgb(253, 176, 97)',
    value: 0,
  },
  {
    color: 'rgb(249, 208, 162)',
    value: 20,
  },
  {
    color: 'rgb(254, 243, 221)',
    value: 40,
  },
  {
    color: 'rgb(246, 247, 244)',
    value: 60,
  },
  {
    color: 'rgb(231, 238, 247)',
    value: 80,
  },
  {
    color: 'rgb(194, 216, 251)',
    value: 100,
  },
]

const colors = [
  {
    color: '#ff0000',
  },
  {
    color: '#ff8700',
  },
  {
    color: '#fff100',
  },
  {
    color: '#00FF00',
  },
  {
    color: '#0025ff',
  },
  {
    color: '#bb00ff',
  },
]

const LdvPresetView = (props) => {
  const {type, onPress} = props
  let dataSource = type == 'temperature' ? temperatures : colors
  return (
    <View style={styles.container}>
      {dataSource.map((item, index) =>
        <TouchableOpacity
          key={index}
          style={[styles.item, {backgroundColor: item.color}]}
          onPress={() => {
            onPress(item)
          }}/>)}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginHorizontal: cx(16),
  },
  item: {
    width: cx(28),
    height: cx(28),
    borderRadius: cx(14),
    borderWidth: cx(1),
    borderColor: 'rgb(230, 231, 232)',
  },
})

export default LdvPresetView