import React from 'react';
import ReactModal from 'react-native-modal';
import { View, Text } from 'react-native';
import { Dropdown } from 'react-native-searchable-dropdown-kj';
import { Button } from '../Button';
import { Colors } from 'src/theme';
import { styles } from './styles';
import { ButtonVariants } from 'src/types/components';
import { noOfVisits, qualityOptions } from 'src/screens/InAppScreens/TravelsScreen/utils/constants';

export const EditNmModal = ({
  isVisible,
  onClose,
  modalState,
  updateModalState,
  updateNM
}: {
  isVisible: boolean;
  onClose: () => void;
  modalState: any;
  updateModalState: (updates: any) => void;
  updateNM: (region: number, first: number, last: number, visits: number, quality: number) => void;
}) => {
  const { years, selectedFirstYear, selectedLastYear, selectedQuality, selectedNoOfVisits, id } =
    modalState;

  const handleFirstYearChange = (item: { value: number; label: string }) => {
    updateModalState({
      selectedFirstYear: item.value,
      selectedLastYear: item.value
    });
  };

  const handleLastYearChange = (item: { value: number; label: string }) => {
    updateModalState({ selectedLastYear: item.value });
  };

  const handleQualityChange = (item: { value: number; label: string }) => {
    updateModalState({ selectedQuality: item });
  };

  const handleVisitsChange = (item: { value: number; label: string }) => {
    updateModalState({ selectedNoOfVisits: item.value });
  };

  const renderOption = (name: string) => (
    <View style={styles.dropdownOption}>
      <Text style={styles.placeholderStyle}>{name}</Text>
    </View>
  );

  return (
    <ReactModal
      isVisible={isVisible}
      onBackdropPress={onClose}
      style={styles.modal}
      statusBarTranslucent={true}
      presentationStyle="overFullScreen"
    >
      <View style={styles.modalContent}>
        <View style={styles.optionsContainer}>
          <View style={styles.rowWrapper}>
            <View style={styles.dropdownWrapper}>
              <Text style={styles.textSmall}>First visit</Text>
              <Dropdown
                style={styles.dropdown}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.placeholderStyle}
                data={years}
                labelField="label"
                valueField="value"
                value={selectedFirstYear}
                placeholder="First visit"
                onChange={handleFirstYearChange}
                containerStyle={{ borderRadius: 4 }}
                renderItem={(item) => renderOption(item.label)}
              />
            </View>
            <View style={styles.dropdownWrapper}>
              <Text style={styles.textSmall}>Last visit</Text>
              <Dropdown
                style={styles.dropdown}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.placeholderStyle}
                data={years.filter(
                  (year: { value: number; label: string }) =>
                    year.value >= selectedFirstYear || year.value === 1
                )}
                labelField="label"
                valueField="value"
                value={selectedLastYear}
                placeholder="Last visit"
                onChange={handleLastYearChange}
                containerStyle={{ borderRadius: 4 }}
                renderItem={(item) => renderOption(item.label)}
              />
            </View>
          </View>

          <View style={styles.rowWrapper}>
            <View style={styles.dropdownWrapper}>
              <Text style={styles.textSmall}>Best visit quality</Text>
              <Dropdown
                style={styles.dropdown}
                placeholderStyle={styles.placeholderStyle}
                containerStyle={{ borderRadius: 4 }}
                selectedTextStyle={styles.placeholderStyle}
                data={qualityOptions}
                labelField="name"
                valueField="id"
                value={selectedQuality.id}
                placeholder="Best visit quality"
                onChange={handleQualityChange}
                renderItem={(item) => renderOption(item.name)}
              />
            </View>
            <View style={styles.dropdownWrapper}>
              <Text style={styles.textSmall}>No of visits</Text>
              <Dropdown
                style={styles.dropdown}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.placeholderStyle}
                data={noOfVisits}
                labelField="label"
                valueField="value"
                value={selectedNoOfVisits}
                placeholder="No of visits"
                onChange={handleVisitsChange}
                containerStyle={{ borderRadius: 4 }}
                renderItem={(item) => renderOption(item.label)}
              />
            </View>
          </View>
        </View>

        <Button
          children="Done"
          onPress={() => {
            updateNM(
              id,
              selectedFirstYear,
              selectedLastYear,
              selectedNoOfVisits,
              selectedQuality.id
            );
            onClose();
          }}
        />
        <Button
          children="Close"
          onPress={onClose}
          variant={ButtonVariants.OPACITY}
          containerStyles={styles.closeBtn}
          textStyles={{ color: Colors.DARK_BLUE }}
        />
      </View>
    </ReactModal>
  );
};
