import React from 'react';
import {View} from 'react-native';
import {IconArrowRight} from '@tabler/icons-react-native';
import {ConsumptionType, TimeOffRequestDate} from '@modules/timeOff/interfaces';
import {useTheme} from '@shared/theme';

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

interface Props {
  from: TimeOffRequestDate;
  to: TimeOffRequestDate;
}

function DateRange({from, to}: Props) {
  const {iconSizes, theme} = useTheme();
  const fromIsHalfDay = from.consumptionType === ConsumptionType.HALF_DAY;
  const toIsHalfDay = to.consumptionType === ConsumptionType.HALF_DAY;

  return (
    <View style={styles.container}>
      <DateContainer
        date={from.date}
        isHalfDay={fromIsHalfDay}
        otherIsHalfDay={toIsHalfDay}
      />
      {from.date !== to.date && (
        <>
          <IconArrowRight
            color={theme.text.neutral.default}
            size={iconSizes.x6}
          />
          <DateContainer
            date={to.date}
            isHalfDay={toIsHalfDay}
            otherIsHalfDay={fromIsHalfDay}
          />
        </>
      )}
    </View>
  );
}

export default DateRange;