import LinearGradientLine from './LinearGradientLine'
import React from 'react'
import {Utils} from 'tuya-panel-kit'
import {StyleProp, StyleSheet, ViewStyle} from 'react-native'
import ColorsLine from './ColorsLine'

const cx = Utils.RatioUtils.convertX

export type MoodColorsLineType = 'gradient' | 'separate'

interface MoodColorsLineProps {
  width?: number
  height?: number
  type: MoodColorsLineType
  colors: string[]
  nodeStyle?: StyleProp<ViewStyle>
}

export default function MoodColorsLine(props: MoodColorsLineProps) {
  const width = props.width || cx(295)
  const height = props.height || cx(24)
  if (props.type === 'separate' || props.colors.length < 2) {
    return (<ColorsLine colors={props.colors} style={{width, height}} nodeStyle={props.nodeStyle}/>)
  } else {
    return (
      <LinearGradientLine
        width={width}
        height={height}
        style={styles.gradient}
        colors={props.colors}/>
    )
  }
}

const styles = StyleSheet.create({
  gradient: {
    borderRadius: cx(8),
  },
})