import React, {useCallback, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconCalendarEvent} from '@tabler/icons-react-native';
import {ListRow, Typography} from '@components';
import {ActivityType} from '@interfaces/timeManagement';
import {getPolicyIcon} from '@modules/timeOff/utils';
import {
  HolidaySummary,
  TimeOffRequestSummary,
} from '@modules/timeTracking/interfaces';
import {ConsumptionType} from '@modules/timeOff/interfaces';
import {useTheme} from '@shared/theme';
import {getFormattedDate} from '@shared/utils';

import DescriptionDialog, {DescriptionConfig} from '../DescriptionDialog';
import {styles} from './styles';

const formatTime = (time?: Nullable<string>) => time?.slice(0, -3);

interface Props {
  holiday?: HolidaySummary;
  isCheckHistory?: boolean;
  timeOffRequest?: TimeOffRequestSummary;
  withDialog?: boolean;
}

function DayOffSection({
  holiday,
  isCheckHistory,
  timeOffRequest,
  withDialog,
}: Props) {
  const {iconSizes, theme} = useTheme();
  const {t} = useTranslation();
  const [descriptionConfig, setDescriptionConfig] =
    useState<DescriptionConfig>(null);
  const isWorkableDay = timeOffRequest?.activityType === ActivityType.WORK;
  const isHoliday = !!holiday;
  const isTimeOffByHours =
    timeOffRequest?.consumptionType === ConsumptionType.HOURS;
  const fromHours = formatTime(timeOffRequest?.fromTime);
  const toHours = formatTime(timeOffRequest?.toTime);
  const isHalfDay =
    timeOffRequest?.consumptionType === ConsumptionType.HALF_DAY;
  const isMultipleDays = timeOffRequest?.fromDate !== timeOffRequest?.toDate;
  const fromDate = getFormattedDate(timeOffRequest?.fromDate);
  const toDate = getFormattedDate(timeOffRequest?.toDate);
  const showExtraInfo = withDialog && (isMultipleDays || isWorkableDay);

  const onOpenDescriptionDialog = () => {
    if (isHoliday) {
      setDescriptionConfig({
        title: t('time_tracker.holiday'),
        description: t('time_tracker.holiday_description'),
      });
    } else if (timeOffRequest) {
      setDescriptionConfig({
        title: timeOffRequest.timeOffPolicyTypeName,
        description: `${t(
          `time_tracking_common.time_offs_permits.${
            isMultipleDays
              ? isWorkableDay
                ? 'period_workable_description'
                : 'period_non_workable_description'
              : isWorkableDay
              ? 'full_day_workable_description'
              : 'full_day_description'
          }`,
          {from: fromDate, to: toDate},
        )}${
          isWorkableDay
            ? ` ${t(
                `time_tracking_common.time_offs_permits.${
                  isCheckHistory
                    ? 'workable_description_user'
                    : 'workable_description'
                }`,
              )}`
            : ''
        }`,
        sections: [
          {
            section: t(
              'time_tracking_common.time_offs_permits.time_off_duration',
            ),
            content: isTimeOffByHours
              ? t('time_tracking_common.hours_from_to', {
                  startHour: fromHours,
                  endHour: toHours,
                })
              : t(`time_tracking_common.${isHalfDay ? 'half_day' : 'one_day'}`),
          },
          {
            section: t('time_tracking_common.time_offs_permits.time_off_type'),
            content: t(
              `time_tracking_common.time_offs_permits.${
                isWorkableDay ? 'workable' : 'non_workable'
              }`,
            ),
          },
        ],
      });
    }
  };

  const onCloseDescriptionDialog = useCallback(() => {
    setDescriptionConfig(null);
  }, []);

  return (
    <View style={styles.container}>
      <Typography variant="xs" weight="semiBold">
        {t('time_tracker.day_off_section')}
      </Typography>
      <ListRow
        onPress={showExtraInfo ? onOpenDescriptionDialog : undefined}
        style={[
          styles.rowContainer,
          {borderColor: theme.border.neutral.default},
        ]}>
        <ListRow.Avatar
          Icon={
            isHoliday
              ? IconCalendarEvent
              : getPolicyIcon(timeOffRequest!.timeOffPolicyTypeIcon)
          }
          variant="highlight"
        />
        <ListRow.Title
          description={
            isHoliday
              ? undefined
              : isTimeOffByHours
              ? `${fromHours} - ${toHours}`
              : isMultipleDays
              ? `${fromDate} ${t('general.to')} ${toDate}`
              : isHalfDay
              ? t('time_tracking_common.half_day')
              : t('time_tracking_common.time_offs_permits.full_day')
          }
          title={
            isHoliday
              ? holiday.holidayName || t('time_tracker.holiday')
              : timeOffRequest!.timeOffPolicyTypeName
          }
          size="xs"
        />
        {!!showExtraInfo && (
          <ListRow.SideContent withRightIcon iconSize={iconSizes.x5} />
        )}
      </ListRow>
      <DescriptionDialog
        descriptionConfig={descriptionConfig}
        onClose={onCloseDescriptionDialog}
      />
    </View>
  );
}

export default DayOffSection;