import React, { useMemo } from 'react';
import { Modal, View, StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import { useSelector, useDispatch } from 'react-redux';
import moment from 'moment';
import { HeaderButton, Icon, Text } from '../../common';
import { SCREEN_HEIGHT, SCREEN_WIDTH, PADDING_TOP, IS_SMALL_SCREEN } from '../../../constants/Constants';
import { HIDE_MAP_MODAL } from '../../../constants/ActionTypes';
import { Store, GeneralReducer, LocaleReducer } from '../../../types';

const MapModal = () => {
  const dispatch = useDispatch();
  const {
    showMap: { visible, region, properties },
  } = useSelector<Store, GeneralReducer>(state => state.general);
  const {
    strings: {
      scanHome: { inDate, fromHour },
    },
  } = useSelector<Store, LocaleReducer>(state => state.locale);

  const [date, hour] = useMemo(() => {
    const time = moment(properties?.fromTime);
    return [time.format('DD.MM.YY'), time.format('HH:mm')];
  }, [properties?.fromTime]);

  return (
    <Modal visible={visible} animationType="slide">
      <HeaderButton type="close" onPress={() => dispatch({ type: HIDE_MAP_MODAL })} />

      <View style={styles.headerContainer}>
        <Icon source={require('../../../assets/main/exposuresSmall.png')} width={27} height={17} customStyles={styles.headerIcon} />
        <Text bold style={styles.place} numberOfLines={20}>{properties?.Place || ''}</Text>
        <Text style={styles.aroundTime}>{`${inDate} ${date} ${fromHour} ${hour}`}</Text>
      </View>

      <MapView
        style={styles.mapStyle}
        region={region}
      >
        <Marker
          coordinate={region}
          image={require('../../../assets/main/mapMarker.png')}
        />
      </MapView>

    </Modal>
  );
};


const styles = StyleSheet.create({
  headerContainer: {
    height: SCREEN_HEIGHT * 0.22,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: PADDING_TOP(51),
    paddingHorizontal: 30,
    paddingBottom: 20,
    marginBottom: IS_SMALL_SCREEN ? 28 : 0
  },
  headerIcon: {
    marginBottom: 8
  },
  place: {
    fontSize: 16
  },
  aroundTime: {
    fontSize: 14,
    marginTop: 10
  },
  mapStyle: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT * 0.78,
  }
});

export default MapModal;