import { Image } from 'expo-image';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import { Images } from '@/constants/images';

interface MenuItem {
  icon: string;
  title: string;
  type: string;
  tip?: string;
}

interface MenuCellProps {
  onItemPress: (type: string) => void;
  showWallet?: boolean;
}

export function MenuCell({ onItemPress, showWallet = false }: MenuCellProps) {
  const menuList: MenuItem[] = [
    ...(showWallet
      ? [
          {
            icon: Images.mine.wallet || '',
            title: '钱包',
            type: '1_1',
          },
        ]
      : []),
    {
      icon: Images.mine.kaixinOrders || '',
      title: '全部订单',
      type: '2_0',
    },
    {
      icon: Images.mine.exchangeIcon || '',
      title: '兑换码',
      tip: '10:00 ~ 18:00',
      type: '6_1',
    },
    {
      icon: Images.mine.customerService || '',
      title: '联系客服',
      tip: '10:00 ~ 18:00',
      type: '4_4',
    },
    {
      icon: Images.mine.address || '',
      title: '地址',
      type: '4_3',
    },
    {
      icon: Images.mine.opinion || '',
      title: '意见反馈',
      type: '4_9',
    },
    {
      icon: Images.mine.setting || '',
      title: '设置',
      type: '4_5',
    },
  ];

  return (
    <View style={styles.container}>
      {menuList.map((item, index) => (
        <TouchableOpacity
          key={index}
          style={styles.menuItem}
          onPress={() => onItemPress(item.type)}
          activeOpacity={0.7}
        >
          <View style={styles.content}>
            <Image source={{ uri: item.icon }} style={styles.icon} contentFit="contain" />
            <Text style={styles.title}>{item.title}</Text>
          </View>
          <View style={styles.arrow}>
            <Text style={styles.arrowText}>›</Text>
          </View>
        </TouchableOpacity>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 6,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    minHeight: 55,
    backgroundColor: 'transparent',
    borderBottomWidth: 0.5,
    borderBottomColor: 'rgba(221,221,221,0.5)',
    paddingHorizontal: 15,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    width: 24,
    height: 24,
    marginRight: 8,
  },
  title: {
    fontSize: 14,
    fontWeight: '350',
    color: '#000',
  },
  arrow: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  arrowText: {
    fontSize: 20,
    color: '#444',
  },
});