import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {ScrollView} from 'react-native-gesture-handler';
import {IconArrowRight} from '@tabler/icons-react-native';
import {
  Button,
  CardContainer,
  Divider,
  ListRow,
  Title,
  Typography,
} from '@components';
import {useModalHandler} from '@hooks/useModalHandler';
import {Navigation} from '@interfaces/navigation';
import {useGetPolicyType} from '@modules/timeOff/hooks';
import {getTimeUnitKey} from '@modules/timeOff/utils';
import {getCompleteName} from '@shared/utils';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import BalanceComposition from './components/BalanceComposition';
import BalanceDetailSk from './components/BalanceDetailSk';
import FooterButtons from './components/FooterButtons';
import {styles} from './styles';

function BalanceDetail({route}: Navigation<Screens.BALANCE_DETAIL>) {
  const {id, user, isInPersonalSpace = true} = route.params;
  const userId = user?.id;
  const {theme} = useTheme();
  const {t} = useTranslation();
  const {
    isVisible: isVisibleComposition,
    onCloseModal: onCloseCompositionDialog,
    onOpenModal: onOpenCompositionDialog,
  } = useModalHandler();
  const {
    currentCycle,
    isBasicAnnualAllowanceType,
    isLoadingPolicyType,
    policyType,
    showCompositionButton,
  } = useGetPolicyType(id, userId);

  const timeUnitKey = getTimeUnitKey(policyType?.unit);
  const prorationFrequency = policyType?.allowanceProrationFrequency;

  return isLoadingPolicyType ? (
    <BalanceDetailSk />
  ) : !policyType ? null : (
    <>
      <ScrollView
        bounces={false}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.container}
        style={{backgroundColor: theme.background.layout.default}}>
        <CardContainer
          style={[
            styles.cardContainer,
            showCompositionButton && styles.withCompositionButton,
          ]}>
          <Typography variant="m" weight="semiBold">
            {t('screens.BalanceDetail')}
          </Typography>
          <Divider style={styles.titleDivider} />
          <View style={styles.infoContainer}>
            {!!user && (
              <View style={styles.userContainer}>
                <Typography color={theme.text.neutral.lighter} variant="xxs">
                  {t('time_off.employee')}
                </Typography>
                <ListRow>
                  <ListRow.Avatar
                    url={user.profilePicture}
                    name={user}
                    size="md"
                  />
                  <ListRow.Title title={getCompleteName(user)} />
                </ListRow>
              </View>
            )}
            {!!policyType?.name && (
              <Title
                title={policyType.name}
                titleNumberOfLines={2}
                topText={t('time_off.policy_type', {count: 1})}
                size="s"
              />
            )}
            {!!currentCycle && (
              <Title
                title={currentCycle}
                topText={t('time_off.current_cycle')}
                size="s"
              />
            )}
            <Title
              title={t(timeUnitKey, {count: policyType.amountRequested})}
              topText={t('time_off.time_used')}
              size="s"
            />
            {isBasicAnnualAllowanceType && (
              <Title
                title={t(timeUnitKey, {count: policyType.currentBalance})}
                topText={t('time_off.available_time')}
                size="s"
              />
            )}
          </View>
          {showCompositionButton && (
            <>
              <Divider style={styles.buttonDivider} />
              <Button
                variant="tertiary"
                size="sm"
                text={t('time_off.view_balance_breakdown')}
                onPress={onOpenCompositionDialog}
                IconRight={IconArrowRight}
                style={styles.compositionButton}
              />
              <BalanceComposition
                userId={userId}
                policyTypeId={policyType.id}
                isVisible={isVisibleComposition}
                policyTypeUnit={policyType.unit}
                onClose={onCloseCompositionDialog}
                prorationFrequency={prorationFrequency}
              />
            </>
          )}
        </CardContainer>
      </ScrollView>
      <FooterButtons
        policyType={policyType}
        isInPersonalSpace={isInPersonalSpace}
        user={user}
      />
    </>
  );
}

export default BalanceDetail;