import React, { memo } from 'react';
import { Pressable } from 'react-native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SSwipeableIcon } from '../../../common/s-components/s-swipeable-icon';
import { StarredSkeleton } from './starred-skeleton';
import { TEntityVisibility } from '../../../common/types';
import { fp as _ } from '../../../common/utils/fp';

type TProps = {
  starred: boolean;
  onPress: () => void;
  entityVisibility: TEntityVisibility;
};

export const StarredBtn: React.FC<TProps> = memo(props => {
  const { starred, onPress, entityVisibility } = props;

  const backgroundColor = 'transparent';

  if (_.path('skeleton', entityVisibility)) {
    return <StarredSkeleton />;
  }

  return (
    <Pressable testID="star-tappable-area" onPress={onPress}>
      {({ pressed }) => (
        <SBox
          testID="star-icon-wrapper"
          width={44}
          height={44}
          backgroundColor={backgroundColor}
          justifyContent="center"
          alignItems="center"
        >
          <SSwipeableIcon
            testID="star-icon"
            name={starred ? 'star-large' : 'star-large-outlined'}
            size={32}
            opacity={pressed ? 0.7 : 1}
            color={starred ? 'wildStrawberry' : 'white'}
          />
        </SBox>
      )}
    </Pressable>
  );
});