import React from 'react';
import type { ReactElement } from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import { Wrapper } from './StyledContentNavigator';
import Button from '../Button';
import Typography from '../Typography';
import { useTheme } from '../../theme';

interface ContentNavigatorProps {
  /**
   * The navigator's content value.
   */
  value: number | string | ReactElement;
  /**
   * Handler to handle press event of previous icon.
   */
  onPreviousPress: () => void;
  /**
   * Handler to handle press event of next icon.
   */
  onNextPress: () => void;
  /**
   * Handler to handle press event of content navigator value.
   */
  onPress?: () => void;
  /**
   * Whether the previous icon is disabled.
   */
  previousDisabled?: boolean;
  /**
   * Whether the next icon is disabled.
   */
  nextDisabled?: boolean;
  /**
   * Content font size.
   */
  fontSize?: 'medium' | 'large';
  /**
   * Additional style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
}

function ContentNavigator({
  onPreviousPress,
  onNextPress,
  onPress,
  value,
  previousDisabled = false,
  nextDisabled = false,
  fontSize = 'medium',
  testID,
  style,
}: ContentNavigatorProps) {
  const theme = useTheme();
  return (
    <Wrapper testID={testID} style={style}>
      <Button.Icon
        icon="arrow-left"
        onPress={onPreviousPress}
        disabled={previousDisabled}
        testID="previous-icon-button"
      />
      {fontSize === 'medium' ? (
        <Typography.Body
          style={{
            paddingHorizontal:
              theme.__hd__.contentNavigator.space.valueHorizontalPadding,
          }}
          variant="small-bold"
          onPress={onPress}
          testID="content-navigator-value"
        >
          {value}
        </Typography.Body>
      ) : (
        <Typography.Title
          style={{
            paddingHorizontal:
              theme.__hd__.contentNavigator.space.valueHorizontalPadding,
          }}
          level="h5"
          onPress={onPress}
          testID="content-navigator-value"
        >
          {value}
        </Typography.Title>
      )}

      <Button.Icon
        icon="arrow-right"
        onPress={onNextPress}
        disabled={nextDisabled}
        testID="next-icon-button"
      />
    </Wrapper>
  );
}

export default ContentNavigator;