import { CompactCard as Card } from '@automattic/components';
import { PureComponent } from 'react';
import LikeButton from 'calypso/blocks/like-button/button';

class SimpleLikeButtonContainer extends PureComponent {
	state = {
		liked: !! this.props.liked,
		count: this.props.likeCount || 0,
	};

	render() {
		return (
			<LikeButton
				{ ...this.props }
				onLikeToggle={ this.handleLikeToggle }
				likeCount={ this.state.count }
				liked={ this.state.liked }
			/>
		);
	}

	handleLikeToggle = ( newState ) => {
		this.setState( {
			liked: newState,
			count: ( this.state.count += newState ? 1 : -1 ),
		} );
	};
}

class LikeButtons extends PureComponent {
	static displayName = 'LikeButton';

	render() {
		return (
			<div>
				<Card compact>
					<SimpleLikeButtonContainer tagName="a" likeCount={ 0 } />
				</Card>
				<Card compact>
					<SimpleLikeButtonContainer tagName="a" likeCount={ 12 } />
				</Card>
				<Card compact>
					<SimpleLikeButtonContainer tagName="a" likeCount={ 12 } liked />
				</Card>
			</div>
		);
	}
}

export default LikeButtons;
