import React from 'react';
import { objectInterface } from '@lib/types/interfaces';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { fetchUser } from '@lib/redux/actions/users-actions';
import { GiftOutlined, ShopOutlined, ContactsOutlined } from '@ant-design/icons';
import { GridAdComponent } from '@components/ad-components';
import Follow from '@components/follow';
import { Tabs, Descriptions, Typography } from 'antd';
import { GuardSpinner } from 'react-spinners-kit';
import Helmet from '@lib/helmet';


interface Component {
	public_user: objectInterface,
	status: Record<string, any>,
	fetchUser: Function,
	match: objectInterface
}

const
	PublicUserProfile = ({ public_user, status, fetchUser, match }: Component) => {

		React.useEffect(() => {
			fetchUser(match.params.username);
		}, [match.params.username]);


		return (<>
			<Helmet pageTitle={public_user?.name + ' | ' + process.env.APP_NAME} pageDescription={public_user?.description} pageImg={public_user?.picture} pageUrl={'/user/' + public_user?.username} />
			{status?.error
				? (<></>)
				: status?.public_user?.fetching
					? (
						<div style={{ minHeight: '100vh', width: '100%' }} className='d-flex justify-content-center align-items-center'>
							<GuardSpinner loading />
						</div>
					)
					: (
						<>
							{public_user
								? (
									<>
										<div className="container pt-50">
											<div className="h_4Q9" data-test="users-route">
												<div className="_2v9nm _2sCnE PrOBO _1CR66" style={{ marginBottom: 0, paddingBottom: 0 }}>
													<div>
														<div className="_25B2U _2KLco">
															<div className="_3mre1">
																<div className="_20Cor q9lsa _2FGz6">
																	<div className="p46HD">
																		<div className="ODWzM">
																			<img className="_1FdcY" src={public_user?.picture} alt={public_user?.name} width="150" height="150" />
																		</div>
																	</div>
																</div>
																<div className="_2Krql _1pgnK _2FGz6">
																	<div className="_3InY5">
																		<div className="XmcS-">
																			<div className="_2227S">
																				<div className="_3FvGs U8wGh _2svCU _1Fli6">{public_user?.name}</div>
																				<div className="_1Fli6">
																					<div className="_3O5mp">
																						<div className="_17lgq">
																							<Follow entity={public_user} modelType='user' />
																						</div>
																					</div>
																				</div>
																			</div>
																		</div>
																		<div className="XmcS-">
																			<div className="_3wgv4 _3-t2G">
																				<div className="_3Q3x_">
																					<div className="_20dNT">
																						<div className="_2BqOk">
																							<a className="_12enb _32oHP" href={public_user?.website_link} rel="nofollow noreferrer noopener" target='_blank'>{public_user?.website_link}</a>
																						</div>
																					</div>
																				</div>
																				<div className="_2j6wN _3Q3x_">
																					<Typography.Paragraph style={{ color: '#000' }} ellipsis={{ rows: 2, expandable: false }}>
																						{public_user?.description}
																					</Typography.Paragraph>
																				</div>
																			</div>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>

											<div className="main-shop-content">
												<Tabs>
													<Tabs.TabPane tab={<span><GiftOutlined />Ads</span>} key="ads">
														<GridAdComponent ads={public_user?.ads} />
													</Tabs.TabPane>
													<Tabs.TabPane tab={<span><ShopOutlined />About</span>} key="about">
														{public_user?.description}
													</Tabs.TabPane>
													<Tabs.TabPane tab={<span><ContactsOutlined />Contact</span>} key="contact">
														<Descriptions>
															{public_user?.email
																? (
																	<>
																		<Descriptions.Item label="Email">{public_user?.email}</Descriptions.Item>
																	</>
																)
																: (<></>)}
															{public_user?.phone
																? (
																	<>
																		<Descriptions.Item label="Telephone">{public_user?.phone} {public_user?.phone_alt ? '|| ' + public_user?.phone_alt : null}</Descriptions.Item>
																	</>
																)
																: (<></>)}
															{public_user?.address
																? (
																	<>
																		<Descriptions.Item label="Address">{public_user?.address}</Descriptions.Item>
																	</>
																)
																: (<></>)}
															{public_user?.postal_code
																? (
																	<>
																		<Descriptions.Item label="Postal Code">{public_user?.postal_code}</Descriptions.Item>
																	</>
																)
																: (<></>)}
															{public_user?.twitter
																? (
																	<>
																		<Descriptions.Item label="Twitter"><a href={public_user?.twitter} target='_blank' rel='nofollow noreferrer noopener'>{public_user?.twitter}</a></Descriptions.Item>
																	</>
																)
																: (<></>)}
															{public_user?.instagram
																? (
																	<>
																		<Descriptions.Item label="Instagram"><a href={public_user?.instagram} target='_blank' rel='nofollow noreferrer noopener'>{public_user?.instagram}</a></Descriptions.Item>
																	</>
																)
																: (<></>)}
															{public_user?.facebook
																? (
																	<>
																		<Descriptions.Item label="Facebook"><a href={public_user?.facebook} target='_blank' rel='nofollow noreferrer noopener'>{public_user?.facebook}</a></Descriptions.Item>
																	</>
																)
																: (<></>)}
															{public_user?.linkedin
																? (
																	<>
																		<Descriptions.Item label="LinkedIn"><a href={public_user?.linkedin} target='_blank' rel='nofollow noreferrer noopener'>{public_user?.linkedin}</a></Descriptions.Item>
																	</>
																)
																: (<></>)}
														</Descriptions>
													</Tabs.TabPane>
												</Tabs>
											</div>

											<div className="_12MS1 PrOBO pt-100 pb-100">
												<div className="">
													<Typography.Paragraph style={{ fontSize: '22px', color: '#000' }}>
														{public_user?.name} has ads in the following categories
													</Typography.Paragraph>
													<div className="_3dpes">
														<div className="_2_OE1">
															{Array.from(Array(25), (e, i) => (
																<div key={i} className="_3Z-ua">
																	{public_user?.ads && public_user?.ads[i]
																		? (
																			<a className="_6PxCM _2SmIi" href={'/' + public_user?.ads[i]?.classified?.slug}>{public_user?.ads[i]?.classified?.name}</a>
																		)
																		: (<></>)}
																</div>
															)
															)}
														</div>
													</div>
												</div>
											</div>
										</div>
									</>
								)
								: (<></>)}
						</>
					)}
		</>);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchUser
	}, dispatch);


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