import React from 'react';
import { Row, Col, Button } from 'antd';

import MyAds from '@pages/auth/user/dashboard/my-ads';
import MyShops from '@pages/auth/user/dashboard/my-shops';
import MyFavorites from '@pages/auth/user/dashboard/my-favorites';
import MyAccount from '@pages/auth/user/dashboard/my-account';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ContentLoader, { Code, Instagram } from 'react-content-loader';
import { StarOutlined, UserOutlined, UnorderedListOutlined, ShopOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { objectInterface } from '@lib/types/interfaces';
import Helmet from '@lib/helmet';
import Foot from '@components/foot';


const
	UserDashboard = ({ userState, status }: objectInterface) => {

		const
			tabsList: Array<{ referal: string, component: any, title: string }> = [
				{
					title: 'My Ads',
					referal: '/my-ads',
					component: <MyAds />,
				},
				{
					title: 'My Shops',
					referal: '/my-shops',
					component: <MyShops />,
				},
				{
					title: 'My Favorites',
					referal: '/my-favorites',
					component: <MyFavorites />,
				},
				{
					title: 'My Account',
					referal: '/my-account',
					component: <MyAccount />,
				},
				// {
				// 	referal: '#insights',
				// 	component: <ProfileSettings />,
				// },
			],
			[activeTab, setActiveTab] = React.useState(tabsList[0]);


		React.useEffect(() => {
			setActiveTab(tabsList.find(tl => tl.referal == window.location.pathname));
		}, [window.location.pathname]);



		return (
			<>
				<Helmet noRobots />

				{status?.error
					? (<></>)
					: status?.user_dashboard?.fetching
						? (<>
							<section className="profile-area pt-70 pb-120">
								<div className="container">
									<div className="row">
										<div className="col-lg-3">
											<div className="profile-sidebar pt-20">
												<div className="profile-card mt-30">
													<div className="profile-sidebar-title">
														<h4 className="title">My Account</h4>
													</div>
													<div className="profile-user text-center">
														<div className="profile-author">
															<ContentLoader viewBox="0 0 380 70">
																<circle cx="30" cy="30" r="30" />
															</ContentLoader>
														</div>
														<div className="profile-author-name">
															<Code />
															<Button type="primary" block icon={<UserOutlined />} disabled>Go To Profile</Button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div className="col-lg-9">
											<div className="profile-dashboard mt-50">
												<div className="profile-sidebar-title">
													<h4 className="title">#</h4>
												</div>
												<div className="profile-dashboard-wrapper">
													<Instagram />
												</div>
											</div>
										</div>
									</div>
								</div>
							</section>
						</>)
						: (<>
							<section className="profile-area pt-70 pb-120">
								<div className="container">
									<Row>
										<Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 24 }} lg={{ span: 6 }}>
											<div className="profile-sidebar pt-20">
												<div className="profile-card mt-30">
													<div className="profile-sidebar-title">
														<h4 className="title">My Account</h4>
													</div>
													<div className="profile-user text-center">
														<div className="profile-author">
															<img src={userState?.picture} alt={userState?.name} />
														</div>
														<div className="profile-author-name">
															<h4 className="name">{userState?.name}</h4>
															<Button href={'/user/' + userState?.username} type="primary" block icon={<UserOutlined />}>Go To Profile</Button>
														</div>
													</div>
													<div className="profile-link">
														<ul>
															<li><Link className={activeTab?.referal == '/my-ads' ? 'active' : null} to="/my-ads"><UnorderedListOutlined /> My Ads</Link></li>
															<li><Link className={activeTab?.referal == '/my-shops' ? 'active' : null} to="/my-shops"><ShopOutlined /> My Shops</Link></li>
															<li><Link className={activeTab?.referal == '/my-favorites' ? 'active' : null} to="/my-favorites"><StarOutlined /> My Favorites</Link></li>
															<li><Link className={activeTab?.referal == '/my-account' ? 'active' : null} to="/my-account"><StarOutlined /> My Account</Link></li>
														</ul>
													</div>
												</div>
											</div>
										</Col>
										<Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 24 }} lg={{ span: 18 }}>
											<div className="profile-dashboard mt-50">
												<div className="profile-sidebar-title">
													<h4 className="title">{activeTab.title}</h4>
												</div>
												<div className="profile-dashboard-wrapper pt-50">
													{activeTab.component}
												</div>
											</div>
										</Col>
									</Row>
								</div>
							</section>
							<Foot />
						</>)}
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);


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