import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Modal from 'react-native-modal';
import CloseSvg from 'assets/icons/close.svg';
import FilterIcon from 'assets/icons/filter.svg';
import { Colors } from 'src/theme';
import { ModalStyles } from '../../TravellersScreen/Components/styles';
import { Dropdown } from 'react-native-searchable-dropdown-kj';
import { Button } from 'src/components';
import { ButtonVariants } from 'src/types/components';

const FilterModal = ({
  isFilterVisible,
  setIsFilterVisible,
  tilesTypes,
  tilesType,
  setTilesType,
  type,
  setType
}: {
  isFilterVisible: boolean;
  setIsFilterVisible: (isVisible: boolean) => void;
  tilesTypes: any[];
  tilesType: any;
  setTilesType: (item: any) => void;
  type: number;
  setType: (type: any) => void;
}) => {
  return (
    <Modal isVisible={isFilterVisible}>
      <View style={{ backgroundColor: 'white', borderRadius: 15 }}>
        <View style={{ marginHorizontal: '5%', marginTop: '5%', marginBottom: '10%' }}>
          <View style={{ alignSelf: 'flex-end' }}>
            <TouchableOpacity
              onPress={() => {
                type === 0
                  ? setTilesType({ label: 'NM regions', value: 0 })
                  : setTilesType({ label: 'UN countries', value: 1 });
                setIsFilterVisible(!isFilterVisible);
              }}
            >
              <CloseSvg fill={Colors.LIGHT_GRAY} />
            </TouchableOpacity>
          </View>
          <View style={{ display: 'flex', alignItems: 'center' }}>
            <Text style={{ color: Colors.DARK_BLUE, fontSize: 20, fontWeight: '700' }}>
              Map filter show visited
            </Text>
            <View style={[ModalStyles.ageAndRankingWrapper, { marginTop: 24 }]}>
              <Dropdown
                style={[ModalStyles.dropdown, { width: '100%' }]}
                placeholderStyle={ModalStyles.placeholderStyle}
                selectedTextStyle={ModalStyles.selectedTextStyle}
                containerStyle={ModalStyles.dropdownContent}
                data={tilesTypes}
                labelField="label"
                valueField="value"
                value={tilesType?.label}
                placeholder={tilesType?.label}
                onChange={(item) => {
                  setTilesType(item);
                }}
              />
            </View>
            <View style={[ModalStyles.buttonsWrapper, { marginTop: 24 }]}>
              <Button
                variant={ButtonVariants.OPACITY}
                containerStyles={{
                  borderColor: Colors.DARK_BLUE,
                  backgroundColor: 'white',
                  width: '45%'
                }}
                textStyles={{
                  color: Colors.DARK_BLUE
                }}
                onPress={() => {
                  setTilesType({ label: 'NM regions', value: 0 });
                }}
                children={'Clear'}
              />
              <Button
                variant={ButtonVariants.FILL}
                containerStyles={{
                  borderColor: Colors.DARK_BLUE,
                  backgroundColor: Colors.DARK_BLUE,
                  width: '45%'
                }}
                textStyles={{
                  color: Colors.WHITE
                }}
                onPress={() => {
                  setType(tilesType.value);
                  setIsFilterVisible(false);
                }}
                children={'Filter'}
              />
            </View>
          </View>
        </View>
      </View>
    </Modal>
  );
};

export default FilterModal;
