import React, {useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  IconDevices,
  IconLink,
  IconMapPin,
  IconSettings2,
  IconUserEdit,
} from '@tabler/icons-react-native';
import {Typography} from '@components';
import {
  TimeTrackingEntry,
  SourceType,
  TrackerEventType,
} from '@modules/timeTracking/interfaces';
import {useTheme} from '@shared/theme';

import DoorDisplayer from '../DoorDisplayer';
import {styles} from './styles';

interface Props {
  entry: TimeTrackingEntry;
}

function RowRegister({entry}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();
  const isStart = entry.type === TrackerEventType.START;

  const {SourceIcon, sourceText} = useMemo(() => {
    const siteName =
      entry.siteName ||
      t(
        entry.isRemoteWork
          ? 'time_tracking_common.home_office.title'
          : 'time_tracker.no_location',
      );
    switch (entry.source) {
      case SourceType.KIOSK:
        return {
          SourceIcon: IconDevices,
          sourceText: entry.kiosk?.name,
        };
      case SourceType.MANUAL:
        return {
          SourceIcon: IconUserEdit,
          sourceText: siteName,
        };
      case SourceType.AUTO_CLOSE:
      case SourceType.DAY_CHANGE:
        return {
          SourceIcon: IconSettings2,
          sourceText: t('time_tracker.system_check'),
        };
      case SourceType.INTEGRATION:
        return {
          SourceIcon: IconLink,
          sourceText: t('time_tracker.integration_check'),
        };
      case SourceType.APP:
      default:
        return {
          SourceIcon: IconMapPin,
          sourceText: siteName,
        };
    }
  }, [entry, t]);

  return (
    <View style={styles.container}>
      <DoorDisplayer isStart={isStart} time={entry.time} />
      <View style={styles.nameContainer}>
        <SourceIcon size={iconSizes.x4} color={theme.text.neutral.lighter} />
        <Typography variant="xxs" color={theme.text.neutral.lighter}>
          {sourceText}
        </Typography>
      </View>
    </View>
  );
}

export default RowRegister;