import React from 'react';
import { doFollow, undoFollow } from 'lib/redux/actions/follows-actions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Button, Tooltip } from 'antd';


interface FI {
	follow?,
	status?,
	doFollow?,
	undoFollow?,
	entity?,
	modelType?
}

const
	FollowComponent = ({ follow, status, doFollow, undoFollow, entity, modelType }: FI) => {
		const followHandler = () => doFollow({
			model_type: modelType,
			model_id: entity.id,
			entity: entity
		});
		const unfollowHandler = () => undoFollow({
			model_type: modelType,
			model_id: entity.id,
			entity: entity
		});

		return (<>
			{
				entity.user_follows
					? (<>
						<Tooltip title={status?.follow?.posting && follow?.model_id == entity.id ? 'Unfollowing' : 'Click to unfollow'}>
							<Button type='primary' htmlType='button' onClick={() => unfollowHandler()} loading={status?.follow?.posting && follow?.model_id == entity.id}>
								Following
							</Button>
						</Tooltip>
					</>)
					: (<>
						<Tooltip title='Click to follow'>
							<Button type='default' htmlType='button' onClick={() => followHandler()} loading={status?.follow?.posting && follow?.model_id == entity.id}>
								Follow
							</Button>
						</Tooltip>
					</>)
			}
		</>);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		doFollow, undoFollow
	}, dispatch),
	Follow = connect(mapStateToProps, mapDispatchToProps)(FollowComponent);

export default Follow;