import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Dropdown, Button, Menu, Tag, Popconfirm, Mentions, Avatar, Form } from 'antd';
import { hasRole } from '@services/auth';
import { assignRole, changeRole, removeRole, fetchNoneMembers, addShopMember } from '@lib/redux/actions/shops-actions';
import { UserDeleteOutlined, UserAddOutlined, UserSwitchOutlined, DownOutlined } from '@ant-design/icons';


interface SMI {
	shop?,
	status?,
	assignRole?,
	changeRole?,
	removeRole?,
	shop_none_members?,
	fetchNoneMembers?,
	addShopMember?,
	userState?
}


const
	ShopMembers = ({ userState, shop, status, assignRole, changeRole, removeRole, shop_none_members = [], fetchNoneMembers, addShopMember }: SMI) => {

		const getMemberRole = (mem): { name: string, label: string, color: string, menu: { label: string, key: number, icon: any, clickHandler: Function }[] } => {
			const
				doAssignRole = (user, role) => assignRole({
					user: user.id,
					role: role
				}),
				doChangeRole = (user, oldrole, newrole) => changeRole({
					user: user.id,
					oldrole: oldrole,
					newrole: newrole
				}),
				doRemoveRole = (user, role) => removeRole({
					user: user.id,
					role: role
				}),
				memberProps = [
					{
						name: shop?.name + ' Owner',
						label: 'Owner',
						menu: [
							{
								key: 0,
								label: 'Remove owner role',
								icon: <UserSwitchOutlined />,
								clickHandler: user => doRemoveRole(user, shop?.name + ' Owner')
							},
							{
								key: 1,
								label: 'Demote to moderator',
								icon: <UserSwitchOutlined />,
								clickHandler: user => doChangeRole(user, shop?.name + ' Owner', shop?.name + ' Moderator')
							},
							{
								key: 3,
								label: 'Remove from shop',
								icon: <UserDeleteOutlined />,
								clickHandler: user => doRemoveRole(user, shop?.name + ' Member')
							},
						],
						color: 'gold'
					},
					{
						name: shop?.name + ' Moderator',
						label: 'Moderator',
						menu: [
							{
								key: 0,
								label: 'Promote to owner',
								icon: <UserSwitchOutlined />,
								clickHandler: user => doChangeRole(user, shop?.name + ' Moderator', shop?.name + ' Owner')
							},
							{
								key: 1,
								label: 'Remove moderator role',
								icon: <UserSwitchOutlined />,
								clickHandler: user => doRemoveRole(user, shop?.name + ' Moderator')
							},
							{
								key: 2,
								label: 'Remove from shop',
								icon: <UserDeleteOutlined />,
								clickHandler: user => doRemoveRole(user, shop?.name + ' Member')
							},
						],
						color: 'purple'
					},
					{
						name: shop?.name + ' Member',
						label: 'Member',
						menu: [
							{
								key: 0,
								label: 'Promote to owner',
								icon: <UserAddOutlined />,
								clickHandler: user => doAssignRole(user, shop?.name + ' Owner')
							},
							{
								key: 1,
								label: 'Promote to moderator',
								icon: <UserAddOutlined />,
								clickHandler: user => doAssignRole(user, shop?.name + ' Moderator')
							},
							{
								key: 2,
								label: 'Remove from shop',
								icon: <UserDeleteOutlined />,
								clickHandler: user => doRemoveRole(user, shop?.name + ' Member')
							},
						],
						color: 'green'
					},
				];
			// shop?.members.foreach(mem => {
			// });
			if (hasRole({roles: mem.roles.map(r => r.name)}, shop?.name + ' Owner')) {
				return memberProps.find(mp => mp.name == shop?.name + ' Owner');
			} else if (hasRole({roles: mem.roles.map(r => r.name)}, shop?.name + ' Moderator')) {
				return memberProps.find(mp => mp.name == shop?.name + ' Moderator');
			} else if (hasRole({roles: mem.roles.map(r => r.name)}, shop?.name + ' Member')) {
				return memberProps.find(mp => mp.name == shop?.name + ' Member');
			}
			// return memberProps;
		};

		const handleSearch = searchKey => searchKey ? fetchNoneMembers(searchKey) : null;

		const [form] = Form.useForm();

		const selectHandler = selected => {
			form.resetFields();
			const payload = {
				member: selected.value,
				shop: shop?.id
			};
			addShopMember(payload);
		};

		const MemberFunctionsMenu = member => {

			return (<>
				<Menu>
					{
						getMemberRole(member).menu.map(m =>
							<Menu.Item key={m.key} icon={m.icon}>
								<Popconfirm
									title="Are you sure to proceed?"
									onConfirm={() => m.clickHandler(member)}
									onCancel={null}
									okText="Yes"
									cancelText="No"
								>
									<span>{m.label}</span>
								</Popconfirm>
							</Menu.Item>
						)
					}
				</Menu>
			</>);
		};


		return (<>
			<div className="col-md-12 col-lg-9">
				<div className="profile-edit mt-50">
					<div className="profile-sidebar-title">
						<h4 className="title">Members</h4>
					</div>
					{hasRole(userState, shop.name + ' Owner')
						? (
							<div style={{ padding: '20px 10px' }}>
								<p>Add a new member</p>
								<Form form={form}>
									<Form.Item>
										<Mentions prefix={''} style={{ width: '100%' }} onSelect={selectHandler} loading={status?.shop_none_members?.fetching} onChange={handleSearch} placeholder='Type username or email to find user' disabled={status?.new_shop_member?.posting}>
											{shop_none_members?.map(nm => (
												<Mentions.Option key={nm.id} value={nm.username} className="antd-demo-dynamic-option">
													<Avatar size={15} src={nm.picture} />
													<span>{nm.username}</span>
												</Mentions.Option>
											))}
										</Mentions>
									</Form.Item>
								</Form>
							</div>
						) : null}
					<section className="seller-author pt-20">
						<div className="container">
							<p>Existing members</p>
							<div className="row">
								{
									status?.error
										? (<></>)
										: status?.shop?.fetching
											? (<></>)
											: (<>
												{
													shop?.members?.map(member => (
														<div key={member.id} className="col-lg-4 col-sm-6">
															<div className="single-seller-author mt-50 mb-50">
																<div className="seller-author-wrapper d-flex">
																	<div className="author-image">
																		<img src={member.picture} alt={member.name} />
																	</div>
																	<div className="author-content media-body">
																		<h5 className="author-name"><a href="#">@{member.username}</a></h5>
																		{ /* <span className="online">Online</span> */ }
																		<Tag color={getMemberRole(member).color}>{getMemberRole(member).label}</Tag>
																	</div>
																</div>
																<div className="seller-wrapper d-flex align-items-center mt-30">
																	{hasRole(userState, shop.name + ' Owner')
																		? (
																			<Dropdown overlay={MemberFunctionsMenu(member)}>
																				<Button>
																					Options <DownOutlined />
																				</Button>
																			</Dropdown>
																		)
																		: null}
																</div>
															</div>
														</div>
													))
												}
											</>)
								}
							</div>
						</div>
					</section>
				</div>
			</div>
		</>);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		assignRole, changeRole, removeRole, fetchNoneMembers, addShopMember
	}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(ShopMembers);