import React from 'react'
import { View, Text, TouchableOpacity, Image } from 'react-native'
import { Utils, Popup } from 'tuya-panel-kit'
import Img from 'res'
import Strings from '@i18n'

const { convertX, height } = Utils.RatioUtils

export const ShowSelectView = (title, data, defaultValue, callback) => {

  const renderSelectView = () => {
    return (
      <View
        style={{
          height: height - convertX(120),
          backgroundColor: 'rgb(242, 242, 247)',
          flexDirection: 'column',
        }}
      >
        <View style={{ marginHorizontal: convertX(16), marginVertical: convertX(40),shadow: {
        shadowColor: '#000000',
        shadowOpacity: 0.2,
        shadowRadius: 8,
        elevation:8,
        shadowOffset: {
            width: 0,
            height: 4,
        },
        backgroundColor: '#fff',
        borderRadius: 8,
    }, }}>
          {
            data.map((item, index) => {
              if (index === 0) {
                return (
                  <View key={item?.id}>
                    {renderItemView(item, () => {
                      Popup.close()
                      callback(item)
                    })}
                  </View>
                )
              } else {
                return (
                  <View key={item?.id}>
                    {renderLineView()}
                    {renderItemView(item, () => {
                      Popup.close()
                      callback(item)
                    })}
                  </View>
                )
              }
            })
          }
        </View>
      </View>
    )
  }

  const renderItemView = ({ title }, onPress) => {
    return (<TouchableOpacity
      style={{
        alignItems: 'center',
        justifyContent: 'space-between',
        // flex: 1,
        flexDirection: 'row',
        height: convertX(44),
        paddingHorizontal: convertX(12)
      }}
      onPress={() => { if (defaultValue !== title) onPress() }}
    >
      <View>
        <Text
          style={{
            fontSize: convertX(17),
            color: '#000',
          }}
        >
          {title}
        </Text>
      </View>
      {defaultValue === title &&
        <Image
          style={{ width: convertX(16), height: convertX(16) }}
          source={Img.app_music_check}
          resizeMode="contain"
        />}
    </TouchableOpacity>)
  }

  const renderLineView = () => {
    return (<View
      style={{
        height: convertX(1),
        backgroundColor: 'rgba(60, 60, 67, 0.36)',
        marginLeft: convertX(12)
      }}
    ></View>)
  }

  const titleNode = () => {
    return (
      <View style={{ flexDirection: 'row', position: 'relative', height: convertX(81) }}>
        <TouchableOpacity
          style={{
            position: 'absolute',
            left: convertX(16),
            bottom: convertX(12),
            zIndex: 1
          }}
          onPress={() => Popup.close()}
        >
          <Text
            style={{
              fontSize: convertX(17),
              color: '#FF6600',
            }}
          >
            {Strings.getLang('auto_scan_system_cancel')}
          </Text>
        </TouchableOpacity>
        <View style={{ flexDirection: 'column-reverse', flex: 1, alignItems: 'center' }}>
          <Text style={{
            fontSize: convertX(17),
            fontWeight: 'bold',
            color: '#000000',
            paddingBottom: convertX(12)
          }}>{title}</Text>
        </View>
      </View>
    )
  }

  Popup.custom({
    content: renderSelectView(),
    title: titleNode(),
    titleTextStyle: {
      color: '#f60',
      fontWeight: 'bold',
      fontFamily: 'helvetica_neue_lt_std_bd',
      height: convertX(91),
    },
    footer: null,
    footerWrapperStyle: {
      display: 'none'
    },
    cancelText: '',
    confirmText: '',
    onMaskPress: ({ close }) => {
      close()
    },
    onConfirm: () => {
      Popup.close()
    },
  })


}