import React, { ReactElement, memo } from "react";
import { Text, ViewStyle, View, StyleSheet } from 'react-native'
import res from "../res"
import I18n from "../i18n";
import { Utils } from "tuya-panel-kit";
import Spacer from "../components/Spacer";
import InfoText from "../components/InfoText";
import ThemeType from '../config/themeType'

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

interface SummaryProps {
  theme?: ThemeType
  style?: ViewStyle
  frequency?: string | ReactElement
  time?: string | ReactElement
  actions?: ReactElement
  hideActions?: boolean
}

const Summary = (props: SummaryProps) => {

  const styles = StyleSheet.create({
    cardContainer: {
      marginHorizontal: cx(24),
    },
    itemTitle: {
      color: props.theme?.global.fontColor,
      fontSize: cx(16),
      fontWeight: 'bold',
      fontFamily: 'helvetica_neue_lt_std_bd',
    },
    summaryContainer: {
      flex: 1,
      flexDirection: 'row',
      marginBottom: cx(10),
    },
    summaryLeft: {
      flexDirection: 'row',
      alignItems: 'center',
      minWidth: cx(100)
    },
    summaryImg: {
      tintColor: props.theme?.global.fontColor,
      width: cx(12),
      height: cx(12),
      marginRight: cx(6)
    },
    leftTitle: {
      fontSize: cx(14),
      color: props.theme?.global.fontColor
    },
    summaryRight: {
      flex: 1,
      flexDirection: 'column',
      marginLeft: cx(15),
      marginTop: cx(5)
    },
    rightWrap: {
      borderRadius: cx(16),
      paddingHorizontal: cx(12),
      alignSelf: 'flex-start',
      backgroundColor: props.theme?.tag.background,
    },
    rightItem: {
      color: props.theme?.tag.fontColor,
    },
  })
  return (
    <View style={styles.cardContainer}>
      <Text style={styles.itemTitle}>{I18n.getLang('add_sleepschedule_one_source_subheadline4_text')}</Text>
      <Spacer height={cx(10)} />
      <View style={{}}>
        <View style={styles.summaryContainer}>
          <InfoText
            icon={res.summary_icon1}
            text={I18n.getLang('feature_summary_frequency_headline')}
            iconStyle={styles.summaryImg}
            textStyle={styles.leftTitle}
            style={styles.summaryLeft}
          />
          <View style={styles.summaryRight}>
            <View style={styles.rightWrap}>
              <Text style={styles.rightItem}>{props.frequency}</Text>
            </View>
          </View>
        </View>
        <View style={styles.summaryContainer}>
          <InfoText
            icon={res.summary_icon2}
            text={I18n.getLang('feature_summary_time_headline')}
            iconStyle={styles.summaryImg}
            textStyle={styles.leftTitle}
            style={styles.summaryLeft}
          />
          <View style={styles.summaryRight}>
            <View style={styles.rightWrap}>
              <Text style={styles.rightItem}>{props.time}</Text>
            </View>
          </View>
        </View>
        {!props.hideActions && <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
            <InfoText
                icon={res.summary_icon3}
                text={I18n.getLang('motion_detection_add_time_schedule_actions_text1')}
                iconStyle={styles.summaryImg}
                textStyle={styles.leftTitle}
                style={styles.summaryLeft}
            />
            <View style={styles.summaryRight}>
              {props.actions}
            </View>
        </View>}
      </View>
    </View>
  )
}

export default memo(withTheme(Summary))
