import React, { PropsWithChildren } from 'react'
import { StyleSheet, Text, View, ViewProps } from 'react-native'
import { Utils } from 'tuya-panel-kit'
import Card from 'components/Card'
import Spacer from 'components/Spacer'
import ThemeType from '../config/themeType'

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

export interface AdvancedData {
  title: string
  subtitles?: string[]
  statusColor?: string
  router: { key: string, params?: any }
  dp?: { key: string, code: string }
  icons?: number | string
}

const enableStatusColor = 'rgb(0, 201, 49)'
const suspendStatusColor = '#FFDEAD'
const disableStatusColor = '#cbcbcb'

export enum AdvancedStatus {
  Enable = 'enable',
  Disable = 'disable',
  Suspend = 'suspend',
}

export function getAdvancedStatusColor(status: AdvancedStatus): string {
  switch (status) {
    case AdvancedStatus.Enable:
      return enableStatusColor
    case AdvancedStatus.Suspend:
      return suspendStatusColor
    case AdvancedStatus.Disable:
      return disableStatusColor
  }
}

export interface AdvanceCardProps extends PropsWithChildren<ViewProps> {
  theme?: ThemeType
  data: AdvancedData
  onPress: () => void
}

const AdvanceCard = (props: AdvanceCardProps) => {
  const {statusColor} = props.data;
  return (
    <Card
      style={styles.itemContainer}
      containerStyle={styles.itemContent}
      onPress={props.onPress}>
      {!!statusColor && <View style={styles.dotBg}>
          <View
              style={[
                styles.dot,
                {backgroundColor: props.data.statusColor},
              ]}/>
      </View>}
      {
        props.children ?
          props.children :
          <View style={styles.titleBg}>
            <Text style={{...styles.title, color: props.theme?.global.fontColor}}>{props.data.title}</Text>
            <Spacer height={cx(8)} />
            {
              (!!props.data.subtitles) && props.data.subtitles.map((subtitle, index) => (
                <Text style={{...styles.subtitle, color: props.theme?.global.secondFontColor}} key={`${subtitle}_${index}`}>{subtitle}</Text>
              ))
            }
          </View>
      }
    </Card>
  )
}

const styles = StyleSheet.create({
  itemContainer: {
    width: cx(154),
    borderRadius: cx(16),
  },
  itemContent: {},
  titleBg: {
    height: cx(118),
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    marginHorizontal: cx(16),
    fontSize: cx(14),
    textAlign: 'center',
    fontFamily: 'helvetica_neue_lt_std_roman',
  },
  subtitle: {
    fontSize: cx(10),
    textAlign: 'center',
    fontFamily: 'helvetica_neue_lt_std_roman',
  },
  dotBg: {
    position: 'absolute',
    top: cx(10),
    end: cx(10),
    borderWidth: cx(.5),
    borderColor: '#cbcbcb80',
    borderRadius: cx(7),
  },
  dot: {
    width: cx(10),
    height: cx(10),
    backgroundColor: 'rgb(0, 201, 49)',
    borderRadius: cx(5),
    borderColor: '#fff',
    borderWidth: cx(1),
  },
})

export default withTheme(AdvanceCard)
