import React from 'react';
import { Avatar, List, Drawer, Button, Tooltip } from 'antd';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { BellFilled } from '@ant-design/icons';
import { fetchNotifications } from '@lib/redux/actions/notifications-actions';
import { post } from '@services/requests';

const
	NotificationsComponent = ({ status, fetchNotifications, notifications }: Record<string, any>) => {
		const
			[visibility, setVisibility] = React.useState(false),
			show = () => {
				setVisibility(true);
				fetchNotifications(1);
			},
			[count, setCount] = React.useState(null),
			onClick = noti => {
				setVisibility(false);
				post({ url: '/api/v1/notifications/' + noti?.id + '/dismiss' }).then(() => {
					noti['read_at'] = true;
					setCount(count - 1);
				});
			};

		React.useEffect(() => {
			if (!notifications && !status?.notifications?.fetching) fetchNotifications(1);
		}, []);

		React.useEffect(() => {
			const getcount = notifications?.data?.filter(nt => !nt?.read_at)?.length;
			setCount(getcount);
			if (getcount < 1) {
				setCount(null);
			}
		}, [notifications]);



		return (
			<>
				<Drawer className='notifications-drawer' width='' onClose={() => setVisibility(false)} title="Notifications" visible={visibility}>
					<List
						loading={status?.notifications?.fetching}
						itemLayout="horizontal"
						dataSource={notifications?.data}
						footer={
							<>
								{
									notifications?.current_page != 1
										? <Button onClick={() => fetchNotifications(parseInt(notifications?.current_page) - 1)}>Load Previous</Button>
										: null
								}
								{
									notifications?.current_page != notifications?.last_page
										? <Button onClick={() => fetchNotifications(parseInt(notifications?.current_page) + 1)}>Load Next</Button>
										: null
								}
							</>
						}
						renderItem={item => {
							const { title, icon, picture, text, url } = item?.data;
							return (
								<List.Item>
									<List.Item.Meta
										avatar={<Avatar src={icon ?? picture} />}
										title={<Link onClick={() => onClick(item)} to={'/' + url}>{title}</Link>}
										description={text}
									/>
								</List.Item>
							);
						}} />
				</Drawer>
				<Tooltip title='Notfications' color='#87d068' placement='bottom'>
					<>
						<Button onClick={show} shape='circle' type='dashed' icon={<BellFilled />} style={{ background: 'transparent' }}></Button>
						{notifications?.data?.find(nt => !nt?.read_at)
							? (
								<span style={{ position: 'relative', top: '-10px', left: '-15px' }} className="badge badge-success">
									{count >= notifications?.per_page ? count + '+' : count}
								</span>
							) : null}
					</>
				</Tooltip>

			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchNotifications
	}, dispatch),
	Notifications = connect(mapStateToProps, mapDispatchToProps)(NotificationsComponent);

export default Notifications;