import React from 'react';
import {StyleSheet, Text, View, ViewProps, ViewStyle} from 'react-native';
import {SwitchButton, Utils} from 'tuya-panel-kit';
import Card from './Card';
import Spacer from './Spacer';
import I18n from '../i18n';
import ThemeType from '../config/themeType'

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

const tagMap = {
  'Static': I18n.getLang('mood_overview_field_chip_text'),
  'Dynamic': I18n.getLang('mood_overview_field_chip_2'),
  'DIY': I18n.getLang('mood_overview_field_chip_diy')
}

interface DiySceneItemProps extends ViewProps {
  theme?: ThemeType
  enable: boolean
  scene: {
    name: string
    type: 'Static' | 'Dynamic' | 'DIY'
    [key: string]: any
  }
  style?: ViewStyle
  onPress?: () => void
  onSwitch: (enable: boolean) => void
}

const DiySceneItem = (props: DiySceneItemProps) => {
  const { scene } = props;

  const styles = StyleSheet.create({
    card: {
      marginHorizontal: cx(24),
    },
    headline: {
      flexDirection: 'row',
      marginHorizontal: cx(16),
    },
    headText: {
      flex: 1,
      color: props.theme?.global.fontColor,
      fontSize: cx(16),
      fontFamily: 'helvetica_neue_lt_std_bd',
      lineHeight: cx(20),
    },
    moodTypeItem: {
      flexDirection: 'row',
    },
    moodTypeLabel: {
      marginStart: cx(16),
      paddingHorizontal: cx(12.5),
      backgroundColor: props.theme?.tag.background,
      borderRadius: cx(8),
    },
    moodTypeLabelText: {
      height: cx(16),
      color: props.theme?.tag.fontColor,
      fontSize: cx(10),
      textAlignVertical: 'center',
      fontFamily: 'helvetica_neue_lt_std_roman',
      lineHeight: cx(16),
    },
  })

  return (
    <Card style={[styles.card, props.style]} onPress={props.onPress}>
      <View>
        <Spacer height={cx(16)} />
        <View style={styles.headline}>
          <Text style={styles.headText}>{scene.name}</Text>
          <SwitchButton
            thumbStyle={{ elevation: 0 }}
            value={props.enable}
            onValueChange={props.onSwitch}
          />
        </View>
        <Spacer />
        <Spacer height={cx(12)} />
        <View style={styles.moodTypeItem}>
          <View style={styles.moodTypeLabel}>
            <Text style={styles.moodTypeLabelText}>
              {tagMap[scene.type]}
            </Text>
          </View>
        </View>
        <Spacer height={cx(16)} />
      </View>
    </Card>
  );
};

export default withTheme(DiySceneItem)
