import {RW3PriceCheck} from './../services/models/RW3PriceCheck';
import {FlatList, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import {useEffect, useState} from 'react';
import {useTheme} from '@src/themes';
import {useRoute} from '@react-navigation/native';
import InvalidVersionAlert from '@src/components/atoms/InvalidVersionAlert';
import React from 'react';
import renderSeparatorListView from '@src/components/atoms/renderSeparatorListView';
import StorelistcellDS from '@src/components/storeList/StorecellDS';
import {convertDate} from '@src/constants/ISPCHelper';
import {RW3PriceCheckType} from '@src/services/models/RW3PriceCheckType';

const PricecheckList = () => {
  const routes = useRoute<any>();
  const {theme, dark} = useTheme();
  //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 [priceCheckList, setPriceCheckList] = useState<RW3PriceCheck[]>([]);

  useEffect(() => {
    // let priceCheck = routes.params.priceChecks;
    const {priceChecks} = routes.params;
    setPriceCheckList(priceChecks);
  }, [routes.params]);

  const renderSeparator = () => {
    return <View style={[styles.viewSeparator]} />;
  };

  const renderItem = ({item, index}) => {
    const priceCheck: RW3PriceCheck = item;
    const type: RW3PriceCheckType = priceCheck.type;

    let formattedDate;

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

    <StorelistcellDS
      displayDate={formattedDate}
      currentType={displayViewType}
      mainTitle={priceCheck.name}
      subTitle={''}
      distance={''}
      currentPricecheck={priceCheck}
      isFromPriceCheck={true}
      onPress={function () {
        //navigateToPricecheckList(item);
      }}
    />;
  };

  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}
        />
        <FlatList
          data={priceCheckList}
          keyExtractor={(item, index) => `${index}`}
          renderItem={renderItem}
          ItemSeparatorComponent={renderSeparator}
        />
      </View>
    </SafeAreaView>
  );
};

export default PricecheckList;

const styles = StyleSheet.create({
  safeAreaContainer: {flex: 1},
  viewContainer: {flex: 1, padding: 0},
  viewSeparator: {
    height: 1,
    width: '100%',
    backgroundColor: '#CED0CE',
  },
});