PinButton.tsx

import React from 'react';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ReportActions from '@userActions/Report';
import * as Session from '@userActions/Session';
import CONST from '@src/CONST';
import type {Report} from '@src/types/onyx';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
import Tooltip from './Tooltip';

type PinButtonProps = {
    /** Report to pin */
    report: Report;
};

function PinButton({report}: PinButtonProps) {
    const theme = useTheme();
    const styles = useThemeStyles();
    const {translate} = useLocalize();

    return (
        <Tooltip text={report.isPinned ? translate('common.unPin') : translate('common.pin')}>
            <PressableWithFeedback
                onPress={Session.checkIfActionIsAllowed(() => ReportActions.togglePinnedState(report.reportID, report.isPinned ?? false))}
                style={styles.touchableButtonImage}
                accessibilityLabel={report.isPinned ? translate('common.unPin') : translate('common.pin')}
                role={CONST.ROLE.BUTTON}
            >
                <Icon
                    src={Expensicons.Pin}
                    fill={report.isPinned ? theme.heading : theme.icon}
                />
            </PressableWithFeedback>
        </Tooltip>
    );
}

PinButton.displayName = 'PinButton';

export default PinButton;