Storelist

import {color} from './../themes/color';
import React, {useEffect, useState} from 'react';
import {
  FlatList,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Modal,
  Alert,
} from 'react-native';
import Storelistcell from '@src/components/storeList/Storelistcell';
import StorelistcellDS from '../components/storeList/StorecellDS';
import {useTheme} from '../themes';
import {useNavigation} from '@react-navigation/native';
import {API_URL_STORE} from '@src/services/url-constant';
import getDefaultParams from '@src/services/api-params';
import {Service} from '@src/services';
import {RW3Store} from '@src/services/models/RW3Store';
import {RW3PriceCheck} from '@src/services/models/RW3PriceCheck';
import {RW3PriceCheckType} from '@src/services/models/RW3PriceCheckType';
import {fontSizes} from '@src/themes/fontsizes';
import {getUserSyncGUID, getUserPeopleID} from '@src/constants/AuthConstatnts';
import StoreInstructionsAndAttachmants from './StoreInstructionsAndAttachmants';
import {getInvalidAlertData} from '@src/constants/Constants';
import InvalidVersionAlert from '@src/components/atoms/InvalidVersionAlert';
import {t} from 'i18next';
import * as geolib from 'geolib';
import {getItemFromStorage} from '@src/utils/Storage';
import PermissionHandler from '@src/utils/PermissionHandler';
import {convertDate} from '@src/constants/ISPCHelper';

const StoreList = () => {
  const {theme, dark} = useTheme();
  const navigation = useNavigation();
  const [arrStoreList, setArrStoreList] = useState<RW3Store[]>([]);
  const [pageNumber, setPageNumber] = useState(1);
  const [refreshing, setRefreshing] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [showNoRecordLabel, setShowNoRecordLabel] = useState(false);
  const [currentLat, setCurrentLat] = useState('');
  const [currentLong, setCurrentLong] = useState('');

  //Required for display Alert
  const [alertTitle, setAlertTitle] = useState<string>();
  const [alertOptions, setAlertOptions] = useState<string[]>([]);
  const [alertMessage, setAlertMessage] = useState<string[]>([]);
  const refAlert = React.useRef<any>();

  // const db = useContext(DatabaseContext);

  // Fetch Storelist data when component mount

  // useEffect(() => {
  //   async function fetchData() {
  //     setArrStoreList([]);
  //     await fetchStoreData(pageNumber, false);
  //   }
  //   fetchData();
  // }, []);

  useEffect(() => {
    getLocationPermission();
  }, []);

  async function getLocationPermission() {
    const hasPermission = await PermissionHandler.hasLocationPermission();
    if (hasPermission) {
      setArrStoreList([]);
      await fetchStoreData(pageNumber, false);
    } else {
    }
  }

  const fetchStoreData = async (page: number, isLoadMoreData: boolean) => {
    // const hasPermission = await PermissionHandler.hasLocationPermission();

    // if (hasPermission) {
    PermissionHandler.getCurrentLatLong();

    if (!isLoadMoreData) {
      page = 1;
    }
    setShowNoRecordLabel(false);
    try {
      const default_params = await getDefaultParams();
      if (!default_params) {
        //use defaultParams
        return;
      }
      const lLat = await getItemFromStorage('latitude');
      const lLong = await getItemFromStorage('longitude');
      setCurrentLat(lLat || '');
      setCurrentLong(lLong || '');
      default_params.append('Page', page.toString());
      default_params.append('PeopleId', (await getUserPeopleID()).toString());
      default_params.append('SyncGuid', (await getUserSyncGUID()).toString());

      const requestParams = {
        method: 'GET',
        url: `${API_URL_STORE.toString()}?${default_params.toString()}`,
        isRawData: true,
        contentType: 'text/plain',
      };
      const storeResponse = await Service.send(requestParams);
      if ([200].includes(storeResponse.status)) {
        if (storeResponse.data.length !== 0) {
          processStoreData(storeResponse, isLoadMoreData);
        } else if (isLoadMoreData) {
          Alert.alert(`${t('NO_MORE_STORES_TO_LOAD')}`);
        }
      } else {
        if (storeResponse.status === 409) {
          const getData: any = getInvalidAlertData(storeResponse.data);
          setAlertTitle(getData?.[0]);
          setAlertMessage(getData?.[1]);
          setAlertOptions(getData?.[2]);
          refAlert.current?.show();
        } else if (storeResponse.status === 401) {
          Alert.alert(
            `${t('INVALID_CREDENTIAL_TITLE')}`,
            storeResponse.data.LoginErrorMessage,
            [{text: `${t('ALERT_DISMISS')}`, style: 'cancel'}],
          );
        } else {
          if ('LoginErrorMessage' in storeResponse.data) {
            Alert.alert('', storeResponse.data.LoginErrorMessage, [
              {text: `${t('ALERT_DISMISS')}`, style: 'cancel'},
            ]);
          } else {
            Alert.alert('', storeResponse.data.Message, [
              {text: `${t('ALERT_DISMISS')}`, style: 'cancel'},
            ]);
          }
        }
      }
    } catch (err) {
      console.log('err', err);
    } finally {
      console.log('Go in finally block');
    }
    // } else {
    //   console.log('dont have permission for location');
    // }
  };

  const loadMoreData = () => {
    setPageNumber(pageNumber + 1);
    fetchStoreData(pageNumber + 1, true);
  };

  const processStoreData = (storeResponse: any, isLoadMoreData: boolean) => {
    if (storeResponse && Object.keys(storeResponse.data).length) {
      const newArrStoreList: Array<RW3Store> = [];
      storeResponse.data.map(storeData => {
        const store = RW3Store.fromJSON(storeData);
        newArrStoreList.push(store);
      });
      if (isLoadMoreData) {
        setArrStoreList([...arrStoreList, ...newArrStoreList]);
        if (newArrStoreList.length === 0) {
          Alert.alert(`${t('NO_MORE_STORES_TO_LOAD')}`);
        }
      } else {
        setArrStoreList(newArrStoreList);
      }
      if (newArrStoreList.length === 0 && pageNumber === 1) {
        setShowNoRecordLabel(true);
      }
    }
  };

  const navigateToPricecheckList = () => {
    navigation.navigate('pricechecklist' as never);
  };

  const renderSeparator = () => {
    return <View style={[styles.viewSeparator]} />;
  };
  const renderFooter = () => {
    return (
      <TouchableOpacity onPress={loadMoreData}>
        <View style={[styles.viewLoadMore]}>
          <Text style={[styles.textLoadMore]}> Load More Data </Text>
        </View>
      </TouchableOpacity>
    );
  };

  function getDistanceFrom(lat: number, long: number) {
    const distance = geolib.getPreciseDistance(
      {latitude: lat, longitude: long},
      {latitude: Number(currentLat), longitude: currentLong},
    );
    const distanceInMiles = geolib.convertDistance(distance, 'mi');
    const distanceInMilesFormat = distanceInMiles.toFixed(1);
    return `${distanceInMilesFormat}`;
  }

  const renderItem = ({item, index}: any) => {
    const {
      name,
      street,
      city,
      state,
      postalCode,
      priceChecks,
      currentPriceCheck,
      latitude,
      longitude,
    } = item;
    const distance = getDistanceFrom(latitude, longitude);

    const priceCheckLength = priceChecks ? priceChecks.length : 0;
    const {type} = currentPriceCheck || {};
    let formattedDate;
    // let distanceInMi = getDistanceFrom(latitude, longitude);

    const displayViewType = (() => {
      if (!currentPriceCheck) {
        return 0;
      } else if (type === RW3PriceCheckType.RW3PriceCheckTypeBoth) {
        formattedDate = convertDate(currentPriceCheck.endDate);
        return currentPriceCheck.hasScrapeData ? 4 : 3;
      } else {
        formattedDate = convertDate(currentPriceCheck.endDate);
        return currentPriceCheck.hasScrapeData ? 2 : 1;
      }
    })();

    return displayViewType ? (
      <StorelistcellDS
        displayDate={formattedDate}
        currentType={displayViewType}
        mainTitle={name}
        subTitle={`${street}, ${city}, ${state} ${postalCode}`}
        distance={distance}
        currentPricecheck={currentPriceCheck}
        onPress={navigateToPricecheckList}
      />
    ) : (
      <Storelistcell
        mainTitle={name}
        subTitle={`${street}, ${city}, ${state} ${postalCode}`}
        superSubTitle={`${priceCheckLength} ${t('NUMBER_PRICE_CHECKS')}`}
        distance={distance}
      />
    );
  };

  return (
    <SafeAreaView
      style={[
        styles.safeAreaContainer,
        {backgroundColor: theme.palette.appWhiteColor},
      ]}>
      <View
        style={[
          styles.viewContainer,
          {
            backgroundColor: theme.palette.backgroundcolor,
          },
        ]}>
        <InvalidVersionAlert
          ref={refAlert}
          title={alertTitle}
          message={alertMessage}
          options={alertOptions}
          cancelButtonIndex={0}
        />

        {showNoRecordLabel ? (
          <Text style={[styles.textNoStoreAvaialable]}>
            {`${t('NO_STORES_TO_LOAD')}`}
          </Text>
        ) : (
          <FlatList
            data={arrStoreList}
            keyExtractor={(item, index) => `${index}`}
            renderItem={renderItem}
            ItemSeparatorComponent={renderSeparator}
            ListFooterComponent={renderFooter}
            refreshing={refreshing}
            onRefresh={() => {
              setRefreshing(true);
              setArrStoreList([]);
              setPageNumber(1);
              fetchStoreData(pageNumber, false);
              setRefreshing(false);
            }}
          />
        )}
        <StoreInstructionsAndAttachmants
          showModel={isModalVisible}
          closeModal={() => setIsModalVisible(!isModalVisible)}
        />
      </View>
    </SafeAreaView>
  );
};
export default StoreList;

const styles = StyleSheet.create({
  safeAreaContainer: {flex: 1},
  viewContainer: {flex: 1, padding: 0},
  viewLoadMore: {
    height: 44,
    flex: 1,
    borderBottomWidth: 1,
    borderBottomStyle: 'solid',
    borderBottomColor: '#CED0CE',
    borderTopWidth: 1,
    borderTopColor: '#CED0CE',
    justifyContent: 'center',
    alignItems: 'center',
  },
  viewSeparator: {
    height: 1,
    width: '100%',
    backgroundColor: '#CED0CE',
  },
  textLoadMore: {
    fontSize: fontSizes.storelistcell.loadMoreTitle,
    color: color.lightTheme.palette.appthemecolor,
  },
  textNoStoreAvaialable: {
    flex: 1,
    justifyContent: 'center',
    alignContent: 'center',
    textAlign: 'center',
    fontSize: fontSizes.storelistcell.loadMoreTitle,
    color: color.lightTheme.palette.lightGrey,
    paddingTop: 20,
  },
});

// function fetchDataFromDB() {
//   const db = useContext(DatabaseContext);

//   useEffect(() => {
//     if (db) {
//       db.transaction(tx => {
//         tx.executeSql(
//           'SELECT * FROM AlternativePriceReason WHERE name = ?',
//           ['Apple'],
//           (_, result) => {
//             console.log('Result:', result);
//           },
//           (_, error) => {
//             console.log('Error:', error);
//           },
//         );
//       });
//     }
//   }, [db]);
// }