import {memo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  IconCheck,
  IconClock,
  IconClockCancel,
  IconClockCheck,
  IconClockX,
  IconX,
} from '@tabler/icons-react-native';
import {useNavigation} from '@react-navigation/native';
import {AvatarProps, Button, CardContainer, ListRow, Pill} from '@components';
import {TimeOffStepState} from '@modules/timeOff/interfaces';
import {
  OvertimeRequestStatus,
  OvertimeRequest as OvertimeRequestType,
} from '@modules/timeTracking/interfaces';
import {transformTimeFromHours} from '@modules/timeTracking/utils';
import {getExactTimeAgo, getCompactDate} from '@shared/utils';
import {Screens} from '@shared/constants';

import {styles} from './styles';

export type RequestAction = Nullable<{
  action: TimeOffStepState;
  stepId: string;
  id: string;
}>;

interface Props {
  isPending?: boolean;
  onRequestAction: (requestAction: RequestAction) => void;
  request: OvertimeRequestType;
}

function OvertimeRequest({isPending, onRequestAction, request}: Props) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const isRejected = request.status === OvertimeRequestStatus.REJECTED;
  const isApproved = request.status === OvertimeRequestStatus.APPROVED;
  const isCancelled =
    request.status === OvertimeRequestStatus.CANCELLED_BY_MODIFICATION;
  const avatarProps: AvatarProps = isPending
    ? {name: request.fullName, url: request.profilePicture}
    : {
        Icon: isCancelled
          ? IconClockCancel
          : isApproved
          ? IconClockCheck
          : isRejected
          ? IconClockX
          : IconClock,
        variant: isCancelled
          ? 'default'
          : isApproved
          ? 'success'
          : isRejected
          ? 'error'
          : 'info',
      };

  const onPressRequest = () => {
    navigation.navigate(Screens.OVERTIME_REQUEST_DETAIL, {
      requestId: request.id,
    });
  };

  const onPressReject = () => {
    onRequestAction({
      action: TimeOffStepState.REJECTED,
      id: request.id,
      stepId: request.currentStepId,
    });
  };

  const onPressApprove = () => {
    onRequestAction({
      action: TimeOffStepState.APPROVED,
      id: request.id,
      stepId: request.currentStepId,
    });
  };

  return (
    <CardContainer style={styles.container}>
      <ListRow onPress={onPressRequest}>
        <ListRow.Avatar {...avatarProps} />
        <ListRow.Title
          description={t('time_tracker.request_time', {
            requestTime: transformTimeFromHours(request.hours),
          })}
          title={request.fullName}
          topText={getExactTimeAgo(request.dateString, getCompactDate)}
        />
        <Pill
          style={styles.pillContainer}
          text={request.hourCategoryName}
          variant="info"
        />
      </ListRow>
      {isPending && (
        <View style={styles.buttonsContainer}>
          <Button
            IconLeft={IconX}
            onPress={onPressReject}
            size="sm"
            text={t('general.reject')}
            variant="secondary"
            style={styles.button}
          />
          <Button
            IconLeft={IconCheck}
            onPress={onPressApprove}
            size="sm"
            text={t('general.approve')}
            style={styles.button}
          />
        </View>
      )}
    </CardContainer>
  );
}

export default memo(OvertimeRequest);