import React, {useRef, useState} from 'react';
import {View, Text, TouchableOpacity, TextInput} from 'react-native';
import {Icon} from 'components';
import Modal from 'react-native-modal';
import {useTranslation} from 'react-i18next';
import styles from './styles';

const ModalSetHours = props => {
  const {t} = useTranslation();
  const {isVisible, onClose} = props;
  const openRef = useRef();
  const closedRef = useRef();
  const [open, setOpen] = useState('');
  const [closed, setClosed] = useState('');

  const handleFormatInput = (val, type) => {
    const formattedValue = formatInput(val.replace(/[^0-9]/g, ''));
    if (formattedValue.length < 6) {
      if (type === 'open') {
        setOpen(formattedValue);
        if (formattedValue.length === 5) {
          closedRef.current.focus();
        }
      } else {
        setClosed(formattedValue);
        if (formattedValue.length === 0) {
          openRef.current.focus();
        }
      }
    }
  };

  const formatInput = input => {
    if (input.length === 2) {
      if (input > 24) {
        return '';
      }
    }
    if (input.length === 5) {
      let inputX = input.split(':');
      if (inputX[1] > 60) {
        return inputX[0];
      }
    }
    if (input.length > 2 && input[2] !== ':') {
      return input.substring(0, 2) + ':' + input.slice(2);
    }
    return input;
  };
  return (
    <Modal isVisible={isVisible} style={styles.modal} avoidKeyboard={true}>
      <View style={styles.modalContainer}>
        <TouchableOpacity onPress={onClose} style={styles.modalButtonClose}>
          <Icon
            name="close"
            type="AntDesign"
            style={styles.modalButtonCloseIcon}
          />
        </TouchableOpacity>
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>{t('set_hours_text')} - Senin</Text>
          <View style={styles.modalSection}>
            <View style={styles.inputSection}>
              <TextInput
                ref={openRef}
                style={styles.input}
                placeholder="00:00"
                keyboardType="decimal-pad"
                value={open}
                onChangeText={val => handleFormatInput(val, 'open')}
                maxLength={5}
              />
            </View>
            <Text style={styles.inputStrip}>-</Text>
            <View style={styles.inputSection}>
              <TextInput
                ref={closedRef}
                style={styles.input}
                placeholder="00:00"
                keyboardType="decimal-pad"
                value={closed}
                onChangeText={val => handleFormatInput(val, 'closed')}
                maxLength={5}
              />
            </View>
          </View>
          <TouchableOpacity
            onPress={() => alert('saved')}
            style={styles.modalButton}>
            <Text style={styles.modalButtonTitle}>{t('save')}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

export default ModalSetHours;
