import React, { memo } from 'react';
import { Dimensions, TouchableOpacity } from 'react-native';
import { SH1 } from '../../common/s-components/typography/s-h1';
import { SBox } from '../../common/s-components/layout/s-box';
import { Icon } from '../../common/components/icon';
import { theme } from '../../app/theme';
import { getCarouselHeaderBottomOffset } from '../transducers';
import { TStepsEntity } from '../types';
import { fp as _ } from '../../common/utils/fp';

const { height: DEVICE_HEIGHT } = Dimensions.get('window');

type TProps = {
  onClose: () => void;
  entity: TStepsEntity;
  currentStepIndex: number;
};

export const CarouselHeader: React.FC<TProps> = memo(props => {
  const { onClose, entity, currentStepIndex } = props;
  const bottomOffset = getCarouselHeaderBottomOffset(DEVICE_HEIGHT);

  return (
    <SBox justifyContent="center" height={44} mx={16} mb={bottomOffset}>
      <SH1 textAlign="center" lineHeight="24px">
        {_.pathOr("What's New?", ['data', currentStepIndex, 'title'], entity)}
      </SH1>
      <SBox position="absolute" left={0}>
        <TouchableOpacity
          testID="carousel-close"
          activeOpacity={0.7}
          onPress={onClose}
          style={{
            width: 44,
            height: 44,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Icon name="close" size={30} color={theme.colors.white} />
        </TouchableOpacity>
      </SBox>
    </SBox>
  );
});