import React from 'react'
import {Text, TouchableOpacity, View} from 'react-native'
import {Utils} from 'tuya-panel-kit'
import I18n from '../i18n/index'

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

const repeatPeriod = [
  {
    index: 1,
    title: I18n.getLang('timeschedule_add_schedule_weekday7_text'),
    enabled: false,
  }, {
    index: 2,
    title: I18n.getLang('timeschedule_add_schedule_weekday1_text'),
    enabled: false,
  }, {
    index: 3,
    title: I18n.getLang('timeschedule_add_schedule_weekday2_text'),
    enabled: false,
  }, {
    index: 4,
    title: I18n.getLang('timeschedule_add_schedule_weekday3_text'),
    enabled: false,
  }, {
    index: 5,
    title: I18n.getLang('timeschedule_add_schedule_weekday4_text'),
    enabled: false,
  }, {
    index: 6,
    title: I18n.getLang('timeschedule_add_schedule_weekday5_text'),
    enabled: false,
  }, {
    index: 7,
    title: I18n.getLang('timeschedule_add_schedule_weekday6_text'),
    enabled: false,
  },
]

export const setDataSource = (loop) => {
  return repeatPeriod.map((item, index) => {
    return {
      ...item,
      enabled: loop[index] === 1,
    }
  })
}

const WeekSelect = (props) => {

  const {value, onSelect, style} = props
  const dataSource = setDataSource(value)

  return (<View style={{
    height: 40,
  }}>
    <View
      style={[{
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginHorizontal: cx(20),
      }, style]}>
      {dataSource.map(period => {
        return (
          <TouchableOpacity
            key={period.index}
            onPress={() => {
              onSelect(period.index)
            }}>
            <View
              style={{
                width: cx(40),
                height: cx(40),
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: cx(20),
                backgroundColor: period.enabled ? props.theme?.global.thirdBrand : props.theme?.global.background,
                borderWidth: cx(1),
                // borderColor: period.enabled ? "#fff" : 'rgba(120, 120, 128, 0.2)'
                borderColor: props.theme?.global.brand,
              }}>

              <Text
                style={{
                  color: props.theme?.global.brand,
                  textAlign: 'center',
                }}>{period.title}</Text>
            </View>
          </TouchableOpacity>
        )
      })}
    </View>

  </View>)
}

export default withTheme(WeekSelect)
