import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import ReactModal from 'react-native-modal';

import { Button, CheckBox } from 'src/components';
import { ButtonVariants } from 'src/types/components';

import { SlowData } from '../../utils/types';
import { Colors } from 'src/theme';
import { styles } from './styles';

const EditModal = ({
  isVisible,
  onClose,
  item,
  updateSlow
}: {
  isVisible: boolean;
  onClose: () => void;
  item: SlowData;
  updateSlow: (id: number, v: boolean, s11: boolean, s31: boolean, s101: boolean) => void;
}) => {
  const [isEnabled11, setIsEnabled11] = useState(Boolean(item.slow11));
  const [isEnabled31, setIsEnabled31] = useState(Boolean(item.slow31));
  const [isEnabled101, setIsEnabled101] = useState(Boolean(item.slow101));

  useEffect(() => {
    setIsEnabled11(Boolean(item.slow11));
    setIsEnabled31(Boolean(item.slow31));
    setIsEnabled101(Boolean(item.slow101));
  }, [item, isVisible]);

  return (
    <ReactModal
      isVisible={isVisible}
      onBackdropPress={onClose}
      style={styles.modal}
      statusBarTranslucent={true}
      presentationStyle="overFullScreen"
    >
      <View style={styles.modalContent}>
        <View style={styles.optionsContainer}>
          <TouchableOpacity
            disabled={isEnabled31 || isEnabled101}
            onPress={() => {
              setIsEnabled11(!isEnabled11);
              setIsEnabled31(isEnabled11 ? false : isEnabled31);
            }}
            style={styles.optionBtn}
          >
            <CheckBox
              onChange={() => {
                setIsEnabled11(!isEnabled11);
                setIsEnabled31(isEnabled11 ? false : isEnabled31);
              }}
              value={isEnabled11}
              color={'#0F3F4F'}
              disabled={isEnabled31 || isEnabled101}
            />
            <Text style={styles.optionText}>11+ days</Text>
          </TouchableOpacity>
          <TouchableOpacity
            disabled={!isEnabled11 || isEnabled101}
            onPress={() => {
              setIsEnabled31(!isEnabled31);
              setIsEnabled101(isEnabled31 ? false : isEnabled101);
            }}
            style={styles.optionBtn}
          >
            <CheckBox
              onChange={() => {
                setIsEnabled31(!isEnabled31);
                setIsEnabled101(isEnabled31 ? false : isEnabled101);
              }}
              value={isEnabled31}
              color={'#0F3F4F'}
              disabled={!isEnabled11 || isEnabled101}
            />
            <Text style={styles.optionText}>31+ days</Text>
          </TouchableOpacity>
          <TouchableOpacity
            disabled={!isEnabled11 || !isEnabled31}
            onPress={() => setIsEnabled101(!isEnabled101)}
            style={styles.optionBtn}
          >
            <CheckBox
              onChange={() => setIsEnabled101(!isEnabled101)}
              value={isEnabled101}
              color={'#0F3F4F'}
              disabled={!isEnabled11 || !isEnabled31}
            />
            <Text style={styles.optionText}>101+ days</Text>
          </TouchableOpacity>
        </View>
        <Button
          children="Done"
          onPress={() => {
            updateSlow(
              item.country_id,
              Boolean(item.visited),
              isEnabled11,
              isEnabled31,
              isEnabled101
            );
            onClose();
          }}
        />
        <Button
          children="Close"
          onPress={onClose}
          variant={ButtonVariants.OPACITY}
          containerStyles={styles.closeBtn}
          textStyles={{ color: Colors.DARK_BLUE }}
        />
      </View>
    </ReactModal>
  );
};

export default EditModal;
