import React, {ReactNode} from 'react';
import {StyleSheet, View} from 'react-native';
import {BottomModalMenuOption} from '@components/Modals/interfaces';
import {SPACING} from '@shared/theme';
import {COLORS} from '@shared/colors';

import {BottomModal, BottomModalProps} from '../BottomModal';
import {MenuItem} from '../MenuItem';

interface BottomModalMenuProps
  extends Omit<BottomModalProps, 'scrollable' | 'children'> {
  options: BottomModalMenuOption[];
  onOptionPress: (key: string) => void;
  ListHeaderComponent?: ReactNode;
}

/**
 * @deprecated Use `_HuGo/Modals` instead
 */
export function BottomModalMenu({
  options,
  onOptionPress,
  ListHeaderComponent,
  ...props
}: BottomModalMenuProps) {
  return (
    <BottomModal {...props}>
      <View style={styles.options}>
        {ListHeaderComponent && ListHeaderComponent}
        {options.map((option, index) => (
          <MenuItem
            key={option.key}
            option={option}
            onPress={onOptionPress}
            isLast={index === options.length - 1}
          />
        ))}
      </View>
    </BottomModal>
  );
}

const styles = StyleSheet.create({
  options: {paddingHorizontal: SPACING.x1},
  option: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING.x1,
    paddingVertical: SPACING.x2,
    borderBottomWidth: 1,
    borderColor: COLORS.LIGHT_GRAY_FOURTEEN,
  },
  optionText: {flex: 1},
  iconContainer: {
    width: SPACING.x4,
    height: SPACING.x4,
    borderRadius: SPACING.x4,
    backgroundColor: COLORS.LIGHT_GRAY_TWO,
    justifyContent: 'center',
    alignItems: 'center',
  },
  lastItem: {
    borderBottomWidth: 0,
  },
});
