import { IngredientTagList } from '@/add-log/components/IngredientTagList';
import { BottomSheet, BottomSheetTextInput } from '@/aesthetics/BottomSheet';
import { Text } from '@/aesthetics/Text';
import { useColors } from '@/aesthetics/styles';
import { useStrings } from '@/common/hooks/useStrings';
import type { StagedFoodLog } from '@/types/foodlog';
import { Pressable, StyleSheet } from 'react-native';

type FoodLogEditorProps = {
  editingLog: StagedFoodLog | null;
  onClose: () => void;
  editFoodName: string;
  onChangeFoodName: (name: string) => void;
  editIngredients: string[];
  newIngredient: string;
  onChangeNewIngredient: (value: string) => void;
  onAddIngredient: () => void;
  onRemoveIngredient: (ingredient: string) => void;
  onSave: () => void;
};

export function FoodLogEditor({
  editingLog,
  onClose,
  editFoodName,
  onChangeFoodName,
  editIngredients,
  newIngredient,
  onChangeNewIngredient,
  onAddIngredient,
  onRemoveIngredient,
  onSave,
}: FoodLogEditorProps) {
  const c = useColors();
  const strings = useStrings();

  return (
    <BottomSheet visible={!!editingLog} onClose={onClose} title={strings.addLog.editor.editFoodLog}>
      <Text style={[styles.label, { color: c.secondaryText }]}>{strings.addLog.log.foodItem}</Text>
      <BottomSheetTextInput
        style={[
          styles.input,
          { color: c.text, borderColor: c.border, backgroundColor: c.background },
        ]}
        value={editFoodName}
        onChangeText={onChangeFoodName}
        placeholder={strings.addLog.log.enterFoodItemName}
        placeholderTextColor={c.secondaryText}
      />

      <IngredientTagList
        label={strings.addLog.ingredients.label}
        placeholder={strings.addLog.ingredients.addPlaceholder}
        ingredients={editIngredients}
        newIngredient={newIngredient}
        onChangeNewIngredient={onChangeNewIngredient}
        onAddIngredient={onAddIngredient}
        onRemoveIngredient={onRemoveIngredient}
      />

      <Pressable style={[styles.saveBtn, { backgroundColor: c.accent }]} onPress={onSave}>
        <Text style={[styles.saveText, { color: c.buttonText }]}>
          {strings.addLog.editor.saveChanges}
        </Text>
      </Pressable>
    </BottomSheet>
  );
}

const styles = StyleSheet.create({
  label: { fontSize: 14, fontWeight: '500', marginBottom: 8 },
  input: {
    borderWidth: 1,
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 14,
    fontSize: 16,
    marginBottom: 20,
  },
  saveBtn: { paddingVertical: 16, borderRadius: 12, alignItems: 'center' },
  saveText: { fontSize: 16, fontWeight: '600' },
});