import React, {useMemo} from 'react'
import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
import {Picker, Utils} from 'tuya-panel-kit'
import _ from 'lodash'
import ThemeType from '../config/themeType'

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

const pickerTheme = {
  fontSize: 20,
}

interface LdvPickerViewProps {
  theme?: ThemeType
  hour: string,
  minute: string,
  setHour: (string) => void,
  setMinute: (string) => void,
  style?: StyleProp<ViewStyle> | undefined,
  unit?: string[]
  minutesStep?: number
  maxHour?: number // 不包含关系
}

const LdvPickerView = (props: LdvPickerViewProps) => {

  const {hour, minute, unit, setHour, setMinute, minutesStep = 1, maxHour = 24} = props
  const hours = useMemo(() => _.times(maxHour, (n) => _.padStart(n.toString(), 2, '0')), [])
  const minutes = useMemo(() => _.times(60 / minutesStep, (n) => _.padStart((n * minutesStep).toString(), 2, '0')) , [props.minutesStep])

  const styles = StyleSheet.create({
    pickerContainer: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    picker: {
      flex: 1,
      backgroundColor: props.theme?.card.background,
    },
    pickerLeft: {},
    pickerItem: {},
    picContainer: {
      flex: 1,
      alignItems: 'center',
      flexDirection: 'row',
    },
    pickerUnit: {
      position: 'absolute',
      right: convertX(20),
      top: '44%',
    },
  })
  return (
    <View key={props.theme?.type} style={[styles.pickerContainer, props.style]}>
      <View style={styles.picContainer}>
        <Picker
          itemTextColor='#aeadb5'
          style={[styles.picker, styles.pickerLeft]}
          loop={true}
          theme={pickerTheme}
          itemStyle={styles.pickerItem}
          textSize={convertX(14)}
          selectedValue={hour}
          itemAlign={'center'}
          onValueChange={value => setHour(value as string)}>
          {hours.map((value) => (
            <Picker.Item key={value} value={value} label={value}/>
          ))}
        </Picker>
        {unit ? <View style={styles.pickerUnit}>
          <Text style={{color: props.theme?.global.fontColor, fontSize: convertX(18)}}>
            {unit[0]}
          </Text>
        </View> : null}
      </View>
      <View style={styles.picContainer}>
        <Picker
          itemTextColor='#aeadb5'
          style={[styles.picker, styles.pickerLeft]}
          loop={true}
          theme={pickerTheme}
          itemStyle={styles.pickerItem}
          textSize={convertX(14)}
          selectedValue={minute}
          onValueChange={value => setMinute(value as string)}>
          {minutes.map((value) => (
            <Picker.Item key={value} value={value} label={value}/>
          ))}
        </Picker>
        {unit ? <View style={styles.pickerUnit}>
          <Text style={{color: props.theme?.global.fontColor, fontSize: convertX(18)}}>
            {unit[1]}
          </Text>
        </View> : null}
      </View>
    </View>
  )
}

export default withTheme(LdvPickerView)
