import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { updateShop } from '@lib/redux/actions/shops-actions';
import { FullScreenLoader } from '@components/loader';
import FileUpload from '@components/file-upload';
import { Button } from 'antd';
import { hasRole } from '@services/auth';


interface SSI {
	shop?,
	status?,
	updateShop?,
	userState?
}

const
	ShopSettings = ({ shop, status, updateShop, userState }: SSI) => {
		const updateHandler = e => {
			e.preventDefault();
			const payload = new FormData(e.target);
			payload.append('id', shop?.id);
			updateShop(payload);
		};

		// status?.shop?.posting ? loader.init() : loader.destroy();


		return (
			<>
				{status?.shop?.posting
					? (
						<FullScreenLoader visible={true} />
					) : null}

				{status?.error
					? (<></>)
					: status?.shop?.fetching
						? (<></>)
						: (
							hasRole(userState, shop.name + ' Owner')
								? (
									<div className="col-md-12 col-lg-9">
										<div className="profile-edit mt-50">
											<div className="profile-sidebar-title">
												<h4 className="title">Shop Settings - Edit</h4>
											</div>
											<div className="profile-form">
												<form onSubmit={e => updateHandler(e)}>
													<div className="row">
														<div className="col-md-12">
															<div className="single-form">
																<label>Shop Name</label>
																<input defaultValue={shop?.name} name='name' type="text" placeholder="Prefered name for your shop" />
																<p className='text-danger'>{status?.shop?.error?.name?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-12">
															<div className="single-form">
																<label>Description</label>
																<textarea defaultValue={shop?.description} name='description' placeholder="Tell your customers about your shop"></textarea>
																<p className='text-danger'>{status?.shop?.error?.description?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-6">
															<div className="single-form">
																<label>Phone Number</label>
																<input defaultValue={shop?.phone} name='phone' type="text" placeholder="Contact number for your shop" />
																<p className='text-danger'>{status?.shop?.error?.phone?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-6">
															<div className="single-form">
																<label>Alternative Phone Number</label>
																<input defaultValue={shop?.phone_alt} name='phone_alt' type="text" placeholder="Alternative contact number for your shop" />
																<p className='text-danger'>{status?.shop?.error?.phone_alt?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-12">
															<div className="single-form">
																<label>Email</label>
																<input defaultValue={shop?.email} name='email' type="email" placeholder="eg: info@yourshop?.com" />
																<p className='text-danger'>{status?.shop?.error?.email?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-6">
															<div className="single-form">
																<label>Address</label>
																<input defaultValue={shop?.address} name='address' type="text" placeholder="Address" />
																<p className='text-danger'>{status?.shop?.error?.address?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-6">
															<div className="single-form">
																<label>Postal Code</label>
																<input defaultValue={shop?.postal_code} type="text" name='postal_code' placeholder="Postal Code" />
																<p className='text-danger'>{status?.shop?.error?.postal_code?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-6">
															<div className="single-form">
																<label>Twitter</label>
																<input defaultValue={shop?.twitter} type="text" name='twitter' placeholder="https://twitter.com/" />
																<p className='text-danger'>{status?.shop?.error?.twitter?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-6">
															<div className="single-form">
																<label>Facebook</label>
																<input defaultValue={shop?.facebook} type="text" name='facebook' placeholder="https://www.facebook.com/" />
																<p className='text-danger'>{status?.shop?.error?.facebook?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-6">
															<div className="single-form">
																<label>Instagram</label>
																<input defaultValue={shop?.instagram} type="text" name='instagram' placeholder="https://instagram.com/" />
																<p className='text-danger'>{status?.shop?.error?.instagram?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-6">
															<div className="single-form">
																<label>Linkedin</label>
																<input defaultValue={shop?.linkedin} type="text" name='linkedin' placeholder="https://linkdin.com/" />
																<p className='text-danger'>{status?.shop?.error?.linkedin?.join('<br />')}</p>
															</div>
														</div>
														<div className="col-md-12">
															<div className="single-form">
																<label>Edit Shop Display Photo</label>
																<FileUpload name='picture' limit={1} defaultFileList={[
																	{
																		uid: shop?.picture,
																		name: shop?.picture?.split('/')[shop?.picture?.split('/').length - 1],
																		status: 'done',
																		url: shop?.picture,
																	}
																]} />
															</div>
														</div>
														<div className="col-md-12">
															<div className="single-form">
																<label>Edit Shop Cover Photo</label>
																<FileUpload name='cover_picture' limit={1} defaultFileList={shop?.cover_picture
																	? [
																		{
																			uid: shop?.cover_picture,
																			name: shop?.cover_picture?.split('/')[shop?.cover_picture?.split('/').length - 1],
																			status: 'done',
																			url: shop?.cover_picture,
																		}
																	]
																	: []
																} />
															</div>
														</div>
														<div className="col-md-12">
															<div className="single-form">
																<label>Edit Shop Gallery</label>
																<FileUpload limit={20} name='gallery' defaultFileList={shop?.gallery?.map(op => ({
																	uid: op.uuid,
																	name: op.name,
																	status: 'done',
																	url: op.url,
																}))} />
															</div>
														</div>
														<div className="col-md-12">
															<div className="single-form">
																<Button htmlType='submit' type='primary'>Update details</Button>
															</div>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
								) : null
						)}
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		updateShop
	}, dispatch);

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