import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import BlockedDatesMessage from '@modules/timeOff/components/BlockedDatesMessage';
import FractionHoursMessage from '@modules/timeOff/components/FractionHoursMessage';
import Message from '@modules/timeOff/components/Message';
import {
  BRAZILIAN_MIN_DAYS_PER_PERIOD_REQUIRED,
  BRAZILIAN_MIN_MAIN_PERIOD_REQUIRED,
  JURISDICTION_RULES_BRAZIL_MESSAGES,
} from '@modules/timeOff/constants';
import {useTimeOffPanelStyle} from '@modules/timeOff/hooks';
import {
  BlockedDatesErrorPayload,
  PolicyType,
} from '@modules/timeOff/interfaces';

import {getErrorMessage} from '../../utils';

export type SubmitRequestErrorMessagesErrors = {
  isBlockedDatesError: boolean;
  blockedDatesError: Nullable<BlockedDatesErrorPayload>;
  isInvalidTimeFractionError: boolean;
  isBrazilMinDaysError: boolean;
  isBrazilMaxPeriodsError: boolean;
  isBrazilMinMainPeriodError: boolean;
  isBrazilCashOutExceedsOneThirdError: boolean;
};

interface Props {
  errors: SubmitRequestErrorMessagesErrors;
  minimumTimeFraction: PolicyType['minimumTimeFraction'];
  submitError: string | false;
}

function SubmitRequestErrorMessages({
  errors,
  minimumTimeFraction,
  submitError,
}: Props) {
  const {t} = useTranslation();

  const panelStyle = useTimeOffPanelStyle();

  const submitErrorMessageKey = submitError
    ? getErrorMessage(submitError)
    : null;

  return (
    <>
      {submitErrorMessageKey && (
        <View style={panelStyle}>
          <Message messageType="error" messages={[t(submitErrorMessageKey)]} />
        </View>
      )}
      {errors.isBlockedDatesError && errors.blockedDatesError && (
        <View style={panelStyle}>
          <BlockedDatesMessage blockedDates={errors.blockedDatesError} />
        </View>
      )}
      {errors.isInvalidTimeFractionError && (
        <View style={panelStyle}>
          <FractionHoursMessage minimumTimeFraction={minimumTimeFraction} />
        </View>
      )}
      {errors.isBrazilMinDaysError && (
        <View style={panelStyle}>
          <Message
            messageType="error"
            messages={[
              t(`${JURISDICTION_RULES_BRAZIL_MESSAGES}.min_days_per_period`, {
                minDays: BRAZILIAN_MIN_DAYS_PER_PERIOD_REQUIRED,
              }),
            ]}
            description={t(
              `${JURISDICTION_RULES_BRAZIL_MESSAGES}.min_days_per_period_description`,
              {minDays: BRAZILIAN_MIN_DAYS_PER_PERIOD_REQUIRED},
            )}
          />
        </View>
      )}
      {errors.isBrazilMaxPeriodsError && (
        <View style={panelStyle}>
          <Message
            messageType="error"
            messages={[
              t(`${JURISDICTION_RULES_BRAZIL_MESSAGES}.max_periods_exceeded`),
            ]}
            description={t(
              `${JURISDICTION_RULES_BRAZIL_MESSAGES}.max_periods_exceeded_description`,
            )}
          />
        </View>
      )}
      {errors.isBrazilMinMainPeriodError && (
        <View style={panelStyle}>
          <Message
            messageType="error"
            messages={[
              t(`${JURISDICTION_RULES_BRAZIL_MESSAGES}.main_period_required`, {
                minDays: BRAZILIAN_MIN_MAIN_PERIOD_REQUIRED,
              }),
            ]}
            description={t(
              `${JURISDICTION_RULES_BRAZIL_MESSAGES}.main_period_required_description`,
              {minDays: BRAZILIAN_MIN_MAIN_PERIOD_REQUIRED},
            )}
          />
        </View>
      )}
      {errors.isBrazilCashOutExceedsOneThirdError && (
        <View style={panelStyle}>
          <Message
            messageType="error"
            messages={[
              t(`${JURISDICTION_RULES_BRAZIL_MESSAGES}.max_cash_vacation_days`),
            ]}
            description={t(
              `${JURISDICTION_RULES_BRAZIL_MESSAGES}.max_cash_vacation_days_description`,
            )}
          />
        </View>
      )}
    </>
  );
}

export default SubmitRequestErrorMessages;