import React from 'react'
import {Utils} from 'tuya-panel-kit'
import Card from './Card'
import {Image, Text, TouchableOpacity, View, ViewProps} from 'react-native'
import LdvSwitch from './ldvSwitch'
import I18n from '@i18n'
import LdvSlider from './ldvSlider'
import Spacer from './Spacer'
import res from '../res'
import Segmented from './Segmented'
import Popup from './Popup'
import ThemeType from '../config/themeType'

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

interface FanAdjustViewProps extends ViewProps {
  theme?: ThemeType
  hideEnable?: boolean
  fanEnable: boolean
  fanSpeed: number
  maxFanSpeed?: number
  isSupportDirection?: boolean
  isSupportDisinfect?: boolean
  isSupportMode?: boolean
  directValue?: string
  modeValue?: string
  disinfect?: boolean
  directOptions?: any[]
  modeOptions?: any[]
  directChange?: (direct: string) => void
  modeChange?: (mode: string) => void
  disinfectChange?: (disinfect: boolean) => void
  onFanSwitch: (fanEnable: boolean) => void
  onFanSpeedChange?: (fanSpeed: number) => void
  onFanSpeedChangeComplete: (fanSpeed: number) => void
}

const FanAdjustView = (props: FanAdjustViewProps) => {
  return (
    <Card style={props.style}>
      <FanAdjustViewContent {...props}/>
    </Card>
  )
}

export function FanAdjustViewContent(props: FanAdjustViewProps) {
  return (
    <View>
      {!props.hideEnable && <LdvSwitch
          title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
          enable={props.fanEnable}
          setEnable={props.onFanSwitch}
          color={''}
          colorAlpha={1}/>}
      {props.fanEnable && (
        <View>
          <LdvSlider
            title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_text')}
            value={props.fanSpeed}
            min={1}
            max={props.maxFanSpeed}
            onValueChange={props.onFanSpeedChange}
            onSlidingComplete={props.onFanSpeedChangeComplete}
            subTitleStr={props.fanSpeed + `/${props.maxFanSpeed}`}/>
          <Spacer/>
        </View>
      )}
      {props.fanEnable && props.isSupportDirection && <View style={{marginHorizontal: cx(16)}}>
          <View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
              <Text style={{
                marginRight: cx(5),
                color: props.theme?.global.fontColor,
              }}>{I18n.getLang('ceiling_fan_tile_uvc_fan_direction')}</Text>
              <TouchableOpacity onPress={() => Popup({
                title: I18n.getLang('ceiling_fan_direction_info_headline'),
                confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
                content: <View>
                  <Text style={{
                    fontWeight: 'bold',
                    color: props.theme?.global.fontColor,
                  }}>{I18n.getLang('ceiling_fan_direction_info_description_text')}</Text>
                  <Spacer/>
                  <Text style={{color: props.theme?.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_1_headline')}</Text>
                  <Text style={{color: props.theme?.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_1_text')}</Text>
                  <Spacer/>
                  <Text style={{color: props.theme?.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_2_headline')}</Text>
                  <Text style={{color: props.theme?.global.fontColor}}>{I18n.getLang('ceiling_fan_direction_info_option_2_text')}</Text>
                </View>,
              })}>
                  <Image style={{width: cx(16), height: cx(16), tintColor: props.theme?.icon.primary}} source={res.ic_info}/>
              </TouchableOpacity>
          </View>
          <Segmented
              options={props.directOptions}
              value={props.directValue}
              onChange={props.directChange}
          />
          <Spacer/>
      </View>}

      {props.fanEnable && props.isSupportMode && <View style={{marginHorizontal: cx(16)}}>
          <View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
              <Text style={{marginRight: cx(5), color: props.theme?.global.fontColor}}>{I18n.getLang('ceiling_fan_tile_uvc_fan_mode')}</Text>
              <TouchableOpacity onPress={() => Popup({
                title: I18n.getLang('ceiling_fan_mode_info_headline'),
                confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
                content: <View>
                  <Text style={{
                    fontWeight: 'bold',
                    color: props.theme?.global.fontColor,
                  }}>{I18n.getLang('ceiling_fan_mode_info_description_text')}</Text>
                  <Spacer/>
                  <Text style={{color: props.theme?.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_1_headline')}</Text>
                  <Text style={{color: props.theme?.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_1_text')}</Text>
                  <Spacer/>
                  <Text style={{color: props.theme?.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_2_headline')}</Text>
                  <Text style={{color: props.theme?.global.fontColor}}>{I18n.getLang('ceiling_fan_mode_info_option_2_text')}</Text>
                </View>,
              })}>
                  <Image style={{width: cx(16), height: cx(16), tintColor: props.theme?.icon.primary}} source={res.ic_info}/>
              </TouchableOpacity>
          </View>
          <Segmented
              options={props.modeOptions}
              value={props.modeValue}
              onChange={props.modeChange}
          />
          <Spacer/>
      </View>}

      {props.fanEnable && props.isSupportDisinfect && <>
          <LdvSwitch
              enable={props.disinfect || false}
              setEnable={props.disinfectChange}
              color={''}
              colorAlpha={1}
              title={I18n.getLang('ceiling_fan_tile_uvc_fan_disinfect')}/>
          <Spacer height={cx(16)}/>
      </>}
    </View>
  )
}

export default withTheme(FanAdjustView)
