import { BottomSheet, BottomSheetTextInput } from '@/aesthetics/BottomSheet';
import { Text } from '@/aesthetics/Text';
import { buttonHeight, font, radius, spacing, useColors } from '@/aesthetics/styles';
import { useStrings } from '@/common/hooks/useStrings';
import { useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';

type TextMemoLoggerProps = {
  visible: boolean;
  title: string;
  onConfirm: (value: string) => void;
  onClose: () => void;
};

export function TextMemoLogger({ visible, title, onConfirm, onClose }: TextMemoLoggerProps) {
  const c = useColors();
  const strings = useStrings();
  const [value, setValue] = useState('');

  const handleClose = () => {
    setValue('');
    onClose();
  };

  const handleConfirm = () => {
    if (!value.trim()) return;
    onConfirm(value.trim());
    setValue('');
  };

  return (
    <BottomSheet visible={visible} onClose={handleClose} title={title}>
      <View style={styles.container}>
        <BottomSheetTextInput
          style={[styles.input, { backgroundColor: c.tagBg, color: c.text }]}
          placeholder={strings.userCustomLogs.enterText}
          placeholderTextColor={c.tertiaryText}
          value={value}
          onChangeText={setValue}
          autoFocus
        />
        <Pressable
          onPress={handleConfirm}
          disabled={!value.trim()}
          style={({ pressed }) => [
            styles.confirmBtn,
            { backgroundColor: c.accent },
            pressed && { opacity: 0.8 },
            !value.trim() && { opacity: 0.4 },
          ]}
        >
          <Text style={[styles.confirmBtnText, { color: c.onAccent }]}>
            {strings.userCustomLogs.log}
          </Text>
        </Pressable>
      </View>
    </BottomSheet>
  );
}

const styles = StyleSheet.create({
  container: { gap: spacing.lg },
  input: {
    paddingVertical: spacing.md,
    paddingHorizontal: spacing.lg,
    borderRadius: radius.md,
    fontSize: font.md,
  },
  confirmBtn: {
    minHeight: buttonHeight.md,
    paddingVertical: spacing.md,
    borderRadius: radius.md,
    alignItems: 'center',
    justifyContent: 'center',
  },
  confirmBtnText: { fontSize: font.md, fontWeight: '600' },
});