import React, { useCallback } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
import { Colors } from 'src/theme';

const SCREEN_HEIGHT = Dimensions.get('window').height;

interface MediaFile {
  uri: string;
  type: 'image';
}

interface Props {
  blockHeight: number;
  closeOptions: () => void;
  onSendMedia: (media: MediaFile[]) => void;
  onSendLocation: (coords: { latitude: number; longitude: number }) => void;
  onShareLiveLocation: () => void;
}

const ChatOptionsBlock: React.FC<Props> = ({
  blockHeight,
  closeOptions,
  onSendMedia,
  onSendLocation,
  onShareLiveLocation
}) => {
  const handleOpenGallery = useCallback(async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsMultipleSelection: true,
        quality: 1,
        selectionLimit: 4
      });

      if (!result.canceled && result.assets) {
        const files = result.assets.map((asset) => ({
          uri: asset.uri,
          type: 'image'
        }));
        onSendMedia(files);
      }
      closeOptions();
    } catch (err) {
      console.warn('Gallery error: ', err);
    }
  }, [onSendMedia, closeOptions]);

  const handleOpenCamera = useCallback(async () => {
    try {
      const perm = await ImagePicker.requestCameraPermissionsAsync();
      if (!perm.granted) {
        console.warn('Permission for camera not granted');
        return;
      }

      const result = await ImagePicker.launchCameraAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        quality: 1
      });

      if (!result.canceled && result.assets) {
        const files = result.assets.map((asset) => ({
          uri: asset.uri,
          type: asset.type === 'video' ? 'video' : 'image'
        }));
        onSendMedia(files);
      }
      closeOptions();
    } catch (err) {
      console.warn('Camera error: ', err);
    }
  }, [onSendMedia, closeOptions]);

  const handleShareLocation = useCallback(async () => {
    try {
      const coords = { latitude: 50.4501, longitude: 30.5234 };
      onSendLocation(coords);
      closeOptions();
    } catch (err) {
      console.warn('Location error: ', err);
    }
  }, [onSendLocation, closeOptions]);

  const handleShareLiveLocation = useCallback(() => {
    onShareLiveLocation();
    closeOptions();
  }, [onShareLiveLocation, closeOptions]);

  return (
    <View style={[styles.container, { height: blockHeight }]}>
      <View style={styles.optionRow}>
        <TouchableOpacity style={styles.optionItem} onPress={handleOpenGallery}>
          <MaterialCommunityIcons name="image" size={36} color={Colors.ORANGE} />
          <Text style={styles.optionLabel}>Gallery</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.optionItem} onPress={handleOpenCamera}>
          <MaterialCommunityIcons name="camera" size={36} color={Colors.ORANGE} />
          <Text style={styles.optionLabel}>Camera</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.optionItem} onPress={handleShareLocation}>
          <MaterialCommunityIcons name="map-marker" size={36} color={Colors.ORANGE} />
          <Text style={styles.optionLabel}>Location</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.optionItem} onPress={handleShareLiveLocation}>
          <MaterialCommunityIcons name="navigation" size={36} color={Colors.ORANGE} />
          <Text style={styles.optionLabel}>Live</Text>
        </TouchableOpacity>
        {/* <TouchableOpacity style={styles.optionItem}>
            <MegaphoneIcon fill={Colors.RED} width={36} height={36} />
            <Text style={styles.optionLabel}>Report</Text>
          </TouchableOpacity> */}
      </View>
    </View>
  );
};

export default ChatOptionsBlock;

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.FILL_LIGHT
  },
  optionRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: '5%',
    marginVertical: 20,
    flexWrap: 'wrap'
  },
  optionItem: {
    width: '30%',
    paddingVertical: 8,
    marginBottom: 12,
    alignItems: 'center'
  },
  optionLabel: {
    marginTop: 6,
    fontSize: 12,
    color: Colors.DARK_BLUE,
    fontWeight: '700'
  }
});