import React, { FC, useState } from 'react';
import Modal from 'react-native-modal';
import { Dropdown } from 'react-native-searchable-dropdown-kj';
import { Text, TouchableOpacity, View } from 'react-native';

import { ModalStyles } from './styles';
import { Colors } from '../../../../theme';

import { Button } from '../../../../components';
import { ButtonVariants } from '../../../../types/components';

import { dataAge, dataRanking } from '../utils';

import CloseIcon from '../../../../../assets/icons/close.svg';
import {
  filterAgeType,
  FilterButtonProps,
  filterCountryType,
  filterRankingType,
  ModalProps
} from '../utils/types';
import FilterIcon from '../../../../../assets/icons/filter.svg';
import { useConnection } from 'src/contexts/ConnectionContext';

export const FilterModal: FC<ModalProps> = ({
  isModalVisible,
  setModalVisible,
  countriesData,
  applyFilter
}) => {
  const netInfo = useConnection();
  const [filterAge, setFilterAge] = useState<filterAgeType>(null);
  const [filterRanking, setFilterRanking] = useState<filterRankingType>(null);
  const [filterCountry, setFilterCountry] = useState<filterCountryType>(null);

  return (
    <Modal isVisible={isModalVisible}>
      <View style={{ height: 270, backgroundColor: 'white', borderRadius: 15 }}>
        <View style={{ marginLeft: '5%', marginRight: '5%', marginTop: '5%' }}>
          <View style={{ alignSelf: 'flex-end' }}>
            <TouchableOpacity onPress={() => setModalVisible(!isModalVisible)}>
              <CloseIcon />
            </TouchableOpacity>
          </View>
          <View style={{ display: 'flex', alignItems: 'center' }}>
            <Text style={{ color: Colors.DARK_BLUE, fontSize: 20, fontWeight: '700' }}>Filter</Text>
            <Dropdown
              style={[ModalStyles.dropdown, { width: '100%', marginTop: 20 }]}
              placeholderStyle={ModalStyles.placeholderStyle}
              selectedTextStyle={ModalStyles.selectedTextStyle}
              containerStyle={ModalStyles.dropdownContent}
              data={countriesData}
              disable={!netInfo?.isInternetReachable}
              labelField="name"
              valueField="two"
              value={filterCountry?.two}
              placeholder="Country"
              onChange={(item) => {
                setFilterCountry(item);
              }}
              search={true}
              searchPlaceholder="Search"
              autoScroll={false}
              inputSearchStyle={ModalStyles.search}
              flatListProps={{ initialNumToRender: 50, maxToRenderPerBatch: 10 }}
            />
            <View style={ModalStyles.ageAndRankingWrapper}>
              <Dropdown
                style={ModalStyles.dropdown}
                placeholderStyle={ModalStyles.placeholderStyle}
                selectedTextStyle={ModalStyles.selectedTextStyle}
                containerStyle={ModalStyles.dropdownContent}
                data={dataRanking}
                labelField="label"
                valueField="value"
                value={filterRanking?.value}
                placeholder="Ranking"
                onChange={(item) => {
                  setFilterRanking(item);
                }}
              />
              <Dropdown
                style={ModalStyles.dropdown}
                placeholderStyle={ModalStyles.placeholderStyle}
                selectedTextStyle={ModalStyles.selectedTextStyle}
                containerStyle={ModalStyles.dropdownContent}
                data={dataAge}
                disable={!netInfo?.isInternetReachable}
                labelField="label"
                valueField="value"
                value={filterAge?.value}
                placeholder="Age"
                onChange={(item) => {
                  setFilterAge(item);
                }}
              />
            </View>
            <View style={ModalStyles.buttonsWrapper}>
              <Button
                variant={ButtonVariants.OPACITY}
                containerStyles={{
                  borderColor: Colors.DARK_BLUE,
                  backgroundColor: 'white',
                  width: '45%'
                }}
                textStyles={{
                  color: Colors.DARK_BLUE
                }}
                onPress={() => {
                  setFilterAge(null);
                  setFilterRanking(null);
                  setFilterCountry(null);
                }}
                children={'Clear'}
              />
              <Button
                variant={ButtonVariants.FILL}
                containerStyles={{
                  borderColor: Colors.DARK_BLUE,
                  backgroundColor: Colors.DARK_BLUE,
                  width: '45%'
                }}
                textStyles={{
                  color: Colors.WHITE
                }}
                onPress={() => {
                  applyFilter(filterAge, filterRanking, filterCountry);
                }}
                children={'Show'}
              />
            </View>
          </View>
        </View>
      </View>
    </Modal>
  );
};

export const FilterButton: FC<FilterButtonProps> = ({ onPress }) => {
  return (
    <TouchableOpacity style={{ padding: 5 }} onPress={onPress}>
      <FilterIcon />
    </TouchableOpacity>
  );
};
