import React, {useEffect, useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import {IconAlertTriangle, IconCalendarEvent} from '@tabler/icons-react-native';
import {Badge, ListRow, Pressable, ProgressBar} from '@components';
import useGetMeasurements from '@hooks/useGetMeasurements';
import {
  getDataFromEntries,
  getFormattedScheduledTime,
  getFormattedTimer,
} from '@modules/timeTracking/utils';
import {
  Incidence,
  ScheduleSource,
  EmployeeStatus,
  UserDaySummaries,
} from '@modules/timeTracking/interfaces';
import DoorDisplayer from '@modules/timeTracking/components/DoorDisplayer';
import {getPolicyIcon} from '@modules/timeOff/utils';
import {useTheme} from '@shared/theme';
import {toHoursAndMinutesFormatted} from '@shared/utils';
import {TO_SECONDS} from '@shared/constants';

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

interface Props {
  selectedDay: Date;
  user: UserDaySummaries;
  isOpened: boolean;
  onPress: () => void;
}

function EmployeeTable({selectedDay, user, isOpened, onPress}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();
  const [onLayout, measurements] = useGetMeasurements();
  const animatedValue = useSharedValue(0);
  const {
    estimatedHours,
    holidays,
    incidences,
    isWorkday,
    scheduleSource,
    timeOffRequests,
    timeTrackingEntries,
    workedHours,
  } = user.daySummaries[0];
  const isFreeDay = scheduleSource !== ScheduleSource.NO_SCHEDULE && !isWorkday;
  const isHoliday = !!holidays?.length;
  const timeOffRequest = timeOffRequests?.[0];
  const scheduledSeconds = isFreeDay ? 0 : estimatedHours * TO_SECONDS;
  const isActiveStatus = user.status === EmployeeStatus.ACTIVE;
  const isInactiveStatus = user.status === EmployeeStatus.INACTIVE;

  useEffect(() => {
    animatedValue.value = withTiming(isOpened ? 1 : 0, {duration: 300});
  }, [animatedValue, isOpened]);

  const containerStyle = useAnimatedStyle(() => ({
    height: measurements.height * animatedValue.value,
  }));

  const hasWarningIncidences = useMemo(
    () =>
      incidences.some(
        incidence =>
          incidence === Incidence.LATE ||
          incidence === Incidence.LOCATION_INCIDENCE,
      ),
    [incidences],
  );

  const hasAbsentIncidence = useMemo(
    () => incidences.some(incidence => incidence === Incidence.ABSENT),
    [incidences],
  );

  const formattedWorkedHours = useMemo(
    () => toHoursAndMinutesFormatted((workedHours || 0) * TO_SECONDS),
    [workedHours],
  );

  const {isStart, lastRegister} = useMemo(() => {
    const {completedRegisters, currentRegister} = getDataFromEntries(
      timeTrackingEntries,
      workedHours,
    );
    return {
      isStart: !!currentRegister,
      lastRegister: currentRegister || completedRegisters.at(-1)?.end,
    };
  }, [timeTrackingEntries, workedHours]);

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: theme.background.layout.tertiary,
          borderColor: theme.border.neutral.default,
        },
      ]}>
      <Pressable onPress={onPress}>
        <ListRow disabled>
          <View>
            <ListRow.Avatar url={user.profilePicture} />
            {(isActiveStatus || (isInactiveStatus && !isFreeDay)) && (
              <Badge
                show
                variant={isActiveStatus ? 'success' : 'warning'}
                style={styles.badge}
              />
            )}
          </View>
          <ListRow.Title
            size="xs"
            title={user.fullName}
            description={
              isFreeDay
                ? t('time_tracker.free_day')
                : getFormattedScheduledTime(scheduledSeconds)
            }
          />
          {(hasWarningIncidences || hasAbsentIncidence) && (
            <View
              style={[
                {
                  backgroundColor: hasAbsentIncidence
                    ? theme.background.feedback.error
                    : theme.background.feedback.warning,
                },
                styles.alertContainer,
              ]}>
              <IconAlertTriangle
                size={iconSizes.x4}
                color={
                  hasAbsentIncidence
                    ? theme.text.feedback.error
                    : theme.text.feedback.warning
                }
              />
            </View>
          )}
          {(isHoliday || !!timeOffRequest) && (
            <ListRow.Avatar
              Icon={
                isHoliday
                  ? IconCalendarEvent
                  : getPolicyIcon(timeOffRequest.timeOffPolicyTypeIcon)
              }
              size="xs"
            />
          )}
        </ListRow>
        {(!isFreeDay || lastRegister) && (
          <ProgressBar
            color={
              isFreeDay || isHoliday ? theme.graphics.success[500] : undefined
            }
            progress={isFreeDay ? 1 : user.workedHours}
            rightSideText={getFormattedTimer(formattedWorkedHours)}
            total={isFreeDay ? 1 : user.estimatedHours}
            style={styles.progressContainer}
          />
        )}
        {lastRegister && (
          <DoorDisplayer
            style={styles.doorContainer}
            isStart={isStart}
            time={lastRegister.time}
          />
        )}
      </Pressable>
      <Animated.View
        style={[containerStyle, styles.detailViewAnimatedContainer]}>
        <EmployeeTableItemDetail user={user} selectedDay={selectedDay} />
      </Animated.View>
      {!measurements.height && (
        <View onLayout={onLayout} style={styles.hiddenDetailViewContainer}>
          <EmployeeTableItemDetail user={user} selectedDay={selectedDay} />
        </View>
      )}
    </View>
  );
}

export default EmployeeTable;