import Card from './Card'
import { FlatList, StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native'
import TextButton from './TextButton'
import Dialog from './Dialog'
import React from 'react'
import { Utils } from 'tuya-panel-kit'
import ThemeType from '../config/themeType'

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

interface ListData {
  text: string
  value?: any
  isMax?: boolean
}

interface CustomListDialogProps extends ViewProps {
  theme?: ThemeType
  itemStyle?: StyleProp<ViewStyle>
  show: boolean
  onDismiss: () => void
  data: ListData[]
  onItemPress: (item: any | undefined, index: number) => void
}

const CustomListDialog = (props: CustomListDialogProps) => {
  const styles = StyleSheet.create({
    popoverItemText: {
      color: props.theme?.global.fontColor,
      fontSize: cx(16),
    },
    disableItemText: {
      color: props.theme?.global.disabledFontColor,
      fontSize: cx(16),
    },
    line: {
      height: .5,
      backgroundColor: 'rgba(60,60,67,.36)',
    },

  })
  return <Dialog
    show={props.show}
    hideMask={true}
    onRequestClose={props.onDismiss}>
    <Card style={props.style}>
      <FlatList
        data={props.data}
        renderItem={({ item, index }) => {
          return (
            <TextButton
              text={item.text}
              style={props.itemStyle}
              textStyle={item.isMax ? styles.disableItemText : styles.popoverItemText}
              onPress={() => {
                props.onItemPress(item.value, index)
              }} />
          )
        }}
        keyExtractor={(_, index) => `${index}`}
        ItemSeparatorComponent={() => (<View style={styles.line} />)} />
    </Card>
  </Dialog>
}

export default withTheme(CustomListDialog)
