import React from 'react';
import { View, Text } from 'react-native';
import { FlashList } from '@shopify/flash-list';

import { PageWrapper, Header } from 'src/components';
import { styles } from './styles';
import { Star } from '../Components/Star';

const FixersCommentsScreen = ({ route }: { route: any }) => {
  const comments = route.params?.comments;

  const renderRatingStars = (rate: string) => {
    const stars = [];

    for (let i = 0; i < 5; i++) {
      const filled = Math.min(Math.max(+rate - i, 0), 1);
      stars.push(<Star key={i} filled={filled} />);
    }
    return <View style={styles.ratingContainer}>{stars}</View>;
  };

  const renderItem = ({ item }: { item: any }) => {
    return (
      <View style={styles.itemContainer}>
        <View style={{ gap: 8 }}>
          <Text style={styles.name}>{item.name}</Text>
          {renderRatingStars(item.rate)}
        </View>

        <Text style={styles.comment}>{item.comment}</Text>
      </View>
    );
  };

  return (
    <PageWrapper>
      <Header label={route.params?.name} />

      <FlashList
        viewabilityConfig={{
          waitForInteraction: true,
          itemVisiblePercentThreshold: 50,
          minimumViewTime: 1000
        }}
        estimatedItemSize={50}
        data={comments}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
        showsVerticalScrollIndicator={false}
      />
    </PageWrapper>
  );
};

export default FixersCommentsScreen;
