import React from 'react';
import {ListRenderItem, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {IconGift, IconInfoSquareRounded} from '@tabler/icons-react-native';
import {Image, Typography, Avatar, List, ListRow, Pill} from '@components';
import {Navigation} from '@interfaces/navigation';
import {Product} from '@modules/acknowledgement/interfaces';
import {useGetExchanges} from '@modules/acknowledgement/hooks';
import {getPillProps} from '@modules/acknowledgement/utils';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';
import {ExchangeListSK} from './components/ExchangeListSK';

function MyExchanges({navigation}: Navigation<Screens.MY_EXCHANGES>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {bottom: paddingBottom} = useSafeAreaInsets();
  const {products, isLoading, hasError, onRefresh} = useGetExchanges();

  const renderItem: ListRenderItem<Product> = ({item}) => {
    const onPress = () =>
      navigation.navigate(Screens.PRODUCT_DETAIL, {
        productId: item.id,
        exchangeDate: item.exchangeDate,
        status: item.status?.color,
      });

    const status = getPillProps(item.statusWithoutTranslation);

    return (
      <ListRow
        onPress={onPress}
        style={[styles.itemCard, {borderColor: theme.border.neutral.default}]}>
        <Image
          source={{uri: item.coverPicture}}
          style={[
            styles.imageContainer,
            {backgroundColor: theme.background.elements.brand},
          ]}
          contentFit="contain"
          renderError={
            <Avatar
              Icon={IconGift}
              iconColor={theme.graphics.hugo[900]}
              size="lg"
            />
          }
        />
        <ListRow.Title
          title={item.name}
          description={`${item.cost} ${t('acknowledgements.point', {
            count: item.cost,
          }).toLowerCase()}`}
          titleNumberOfLines={2}
          descriptionNumberOfLines={2}
        />
        <Pill {...status} />
      </ListRow>
    );
  };
  // TODO change this translations and logic when removing old products in next card

  return (
    <View
      style={[styles.flex, {backgroundColor: theme.background.layout.default}]}>
      {isLoading ? (
        <ExchangeListSK />
      ) : (
        <List
          data={products}
          renderItem={renderItem}
          style={[
            styles.content,
            !products?.length && styles.emptyContainer,
            {backgroundColor: theme.background.layout.default, paddingBottom},
          ]}
          onRefresh={onRefresh}
          titleEmptyList={t(
            'acknowledgements.products.exchange_list_empty.title',
          )}
          descriptionEmptyList={t(
            'acknowledgements.products.exchange_list_empty.description',
          )}
          IconEmptyList={
            <Avatar Icon={IconInfoSquareRounded} variant="primary" size="lg" />
          }
          ListHeaderComponent={
            products?.length ? (
              <Typography weight="semiBold">
                {t('acknowledgements.products.exchange_state')}
              </Typography>
            ) : null
          }
          isLoading={isLoading}
          isRefreshing={isLoading}
          isError={hasError}
        />
      )}
    </View>
  );
}

export default MyExchanges;