import React, {useCallback, useMemo} from 'react';
import {View} from 'react-native';
import {IconDownload} from '@tabler/icons-react-native';
import {IconButton, ListRow, Spinner, Typography} from '@components';
import {PayrollReceipt} from '@modules/widgets/interfaces';
import {ICON_SIZES, SPACING, useTheme} from '@shared/theme';

import {PAYROLL_MOBILITY_ADO_STRINGS} from '../../strings';
import {
  buildPayrollReceiptDevengo,
  buildPayrollReceiptPeriod,
} from '../../utils';
import {styles} from './styles';

export interface Props {
  receipt: PayrollReceipt;
  onPreview: () => void;
  onDownload: () => void;
  isDownloading?: boolean;
}

export function PayrollReceiptRow({
  receipt,
  onPreview,
  onDownload,
  isDownloading = false,
}: Props) {
  const {theme} = useTheme();

  const period = useMemo(() => buildPayrollReceiptPeriod(receipt), [receipt]);
  const devengo = useMemo(() => buildPayrollReceiptDevengo(receipt), [receipt]);

  const renderSubtitle = useCallback(
    () => (
      <Typography variant="xs" color={theme.text.neutral.lighter}>
        <Typography
          variant="xs"
          weight="semiBold"
          color={theme.text.neutral.lighter}>
          {period}
        </Typography>
        {` · ${devengo}`}
      </Typography>
    ),
    [period, devengo, theme],
  );

  return (
    <View
      style={[
        styles.rowCard,
        {
          backgroundColor: theme.background.elements.default,
          borderColor: theme.border.neutral.default,
        },
      ]}>
      <ListRow
        backgroundColor={theme.background.elements.default}
        style={styles.mainPressable}
        onPress={onPreview}>
        <ListRow.Title
          title={receipt.dNomina}
          titleNumberOfLines={2}
          size="s"
          renderDescription={renderSubtitle}
        />
      </ListRow>
      <View style={styles.downloadSlot}>
        {isDownloading ? (
          <Spinner size={ICON_SIZES.x6} />
        ) : (
          <IconButton
            Icon={IconDownload}
            accessibilityHint={
              PAYROLL_MOBILITY_ADO_STRINGS.downloadAccessibility
            }
            accessibilityLabel={
              PAYROLL_MOBILITY_ADO_STRINGS.downloadAccessibility
            }
            hitSlop={SPACING.x1}
            iconColor={theme.icon.neutral.brand}
            onPress={onDownload}
            size="lg"
            variant="tertiary"
          />
        )}
      </View>
    </View>
  );
}