import React from "react";

import { connect } from 'react-redux';

import { withRouter } from "react-router-dom";
import { compose } from "redux";
import Modal from 'react-modal';
import ProductService from '../services/ProductService';
import CountryService from '../services/CountryService';
import ToastService from '../services/ToastService';
import '../public/common.css'

class UserDashboard extends React.Component {

constructor(props) {
super(props);

this.handleChange = this.handleChange.bind(this);
window.scrollTo(0, 0);
this.state = {
showModal: false, title: '', description: '', type: 0, path: ''
}
}

componentWillMount = () => { };

toggleModal = () => {
this.setState({
showModal: !this.state.showModal
});
};

handleChange(field, e) {
this.setState({ [field]: e.target.value });

}
selectedSection = (type) => {
this.setState({ type: type })
this.toggleModal()
}
handleSubmit = (event) => {
event.preventDefault();
if (this.state.type == 1) this.addProduct()

if (this.state.type === 3) this.addCountry()

}
addCountry = () => {
let countryObj = {
"path": this.state.path,
"title": this.state.title

}
// if (this.form.getChildContext()._errors.length > 0) {
// if (this.error) {
// return
// }
// else {
 // return ToastService.error(this.props.translation?.fill_form)
// }
// } else {
// if (!this.error) {
CountryService.addCountry(countryObj).then((result) => {
// if (result.success) this.setState({ showModal: !this.state.showModal })
// else return ToastService.error(result.data.message)
});
}
addProduct = () => {
let productObj = {
"post_title": this.state.title,
"post_content": this.state.description,
"blog_id": localStorage.getItem('blogId')
}
// if (this.form.getChildContext()._errors.length > 0) {

// if (this.error) {
// return
// }
// else {
// return ToastService.error(this.props.translation?.fill_form)
// }
// } else {
// if (!this.error) {
ProductService.addProduct(productObj).then((result) => {
// if (result.success) this.setState({ showModal: !this.state.showModal })
// else return ToastService.error(result.data.message)
});
}
cardstyl = {
display: "flex",
alignItems: 'center',
flexDirection: "column",
flexGrow: '1',
minHeight: '150px',
cursor: "pointer",
borderRadius: "20px",
padding: "0.75rem",
boxShadow:
"rgb(0 0 0 / 20%) 6px 6px 14px 0px, rgb(180 180 180 / 63%) -8px -8px 18px
0px"
}

colorhd_ = {
fontStyle: "normal",
fontWeight: "800",
lineHeight: "28px",
color: '#525252',
margin: '1rem 0 0rem 0'
}

render() {
const { showModal, title, description, type, path } = this.state

return (<>
<section id="ayushBranch" style={{ background: 'rgb(211 215 206)' }}>
 <div className="container" style={{ display: 'flex', flexDirection:
'column', rowGap: '1rem', marginBottom: '4rem' }}>
<h2 style={this.colorhd_}>
<span style={{ fontWeight: '500' }}>Welcome,</span> Digital India
Corporation
</h2>
<p style={{ fontSize: '14px', color: '#4d4d4d' }}>Lorem ipsum, dolor sit
amet consectetur adipisicing elit. Minus ratione enim ea nam magnam eligendi
repellendus pariatur exercitationem aliquam commodi quibusdam earum neque impedit,
porro totam corporis ipsum ipsam quis!</p>
<div style={{ columnGap: '2rem' }} className="d-flex justify-content-
between align-items-start">

{/* below is the modal code */}

{/* <Modal className='custom-modal-width'
isOpen={showModal}
onRequestClose={this.toggleModal}
contentLabel="Add Product"
shouldCloseOnOverlayClick={true}
ariaHideApp={false}
>
<span className="float-right"> </span>
<form ref={c => { this.form = c }} >
{type === 1 && (<><h4 className="mb-4"> Add Product</h4>
<div className="form-group">
<label htmlFor="name" className="col-form-
label">Title<span>*</span></label>
<input type="text" className="form-control" id="name"
value={title} onChange={(e) => this.setState({ title: e.target.value })} />
</div>
<div className="form-group">
<label htmlFor="inquiry" className="col-form-
label">Description<span>*</span></label>

<textarea className="form-control" rows="4" cols="50"

name="Comment" placeholder="Type your Question..." value={description}
validations={[this.required]} onChange={(e) => this.setState({ description:
e.target.value })}>
</textarea>
</div></>)}

{type === 3 && (<><h4 className="mb-4"> Add Country</h4>

<div className="form-group">
<label htmlFor="name"
className="col-form-label">Path<span>*</span></label>
<input type="text" className="form-control" id="name"
value={path} placeholder="Path" onChange={(e) => this.setState({ path:
e.target.value })} />
</div>
<div className="form-group">
<label htmlFor="inquiry" className="col-form-
label">Title<span>*</span></label>
<input className="form-control" rows="4" cols="50"
name="Comment" placeholder="Title" value={title} validations={[this.required]}
onChange={(e) => this.setState({ title: e.target.value })}>
</input>
</div></>)}

<button className="btn btn-theme" value="Submit" disabled={false}

onClick={this.handleSubmit}> Submit
</button>

</form>
</Modal> */}

{/* below are the main buttons */}

<div type="button" class="btn btn-primary" data-bs-toggle="modal" data-

bs-target="#exampleModalCenter" className="dbcards" style={this.cardstyl} >
<img src={require('../public/addProduct.svg')} style={{ width:
'70px', padding: '1rem 0 1rem 0' }} alt="addProduct" />
<p style={{ textAlign: 'center', fontWeight: '700', color: 'dimgrey',
margin: '0 0 0.5rem 0' }}>Add New Product</p>
<p style={{ textAlign: 'center', fontSize: '10px' }}>Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut error facere maxime sequi
quibusdam quidem harum cumque deleniti</p>
</div>
{/* below is the add product modal */}
<div class="modal fade" id="exampleModalCenter" tabindex="-1"
role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
{/* The main modal body starts below */}
<div class="modal-content" >
<div class="modal-header">
<div style={{ display: 'flex', alignItems: 'center', columnGap:
'1rem' }}>
<img src={require('../public/addProduct.svg')}
style={{ width: '40px' }} alt="addProduct" />
<h5 class="modal-title" id="exampleModalLongTitle">Add New
Product</h5>
</div>
{/* close button */}
<div class="closebtnmodl" data-bs-dismiss="modal" aria-
label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0
8 0a8 8 0 0 0 0 16z" />
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-
2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646
2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
</div>
</div>
{/* below is the modal body containing the input fields */}
<div class="modal-body">
<div className="form-group">
<label htmlFor="name" className="col-form-
label">Title<span>*</span></label>
<input style={{ background: '#f8f8f8', border: '2px solid
#dddddd', padding: '1rem', borderRadius: '14px' }} type="text" className="form-
control" id="name" value={title} onChange={(e) => this.setState({ title:
e.target.value })} />
</div>
<div className="form-group">
<label htmlFor="inquiry" className="col-form-
label">Description<span>*</span></label>
 <textarea style={{ background: '#f8f8f8', border: '2px solid
#dddddd', padding: '1rem', borderRadius: '14px' }} className="form-control"
rows="4" cols="50" name="Comment" placeholder="Type your Question..."
value={description} validations={[this.required]} onChange={(e) =>
this.setState({ description: e.target.value })}>
</textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"
onClick={this.handleSubmit}>Save changes</button>
</div>
</div>
</div>
</div>

<div className="dbcards" style={this.cardstyl}>

<img src={require('../public/addUser.svg')} style={{ width: '70px',
padding: '1rem 0 1rem 0' }} alt="addUser" />
<p style={{ textAlign: 'center', fontWeight: '700', color: 'dimgrey',
margin: '0 0 0.5rem 0' }}>Add New User</p>
<p style={{ textAlign: 'center', fontSize: '10px' }}>Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut error facere maxime sequi
quibusdam quidem harum cumque deleniti</p>
</div>

<div type="button" class="btn btn-primary" data-bs-toggle="modal" data-

bs-target="#exampleModalCenter_country" className="dbcards" style={this.cardstyl}
onClick={() => this.selectedSection(3)}>
<img src={require('../public/addCountry.svg')} style={{ width:
'70px', padding: '1rem 0 1rem 0' }} alt="addCountry" />
<p style={{ textAlign: 'center', fontWeight: '700', color: 'dimgrey',
margin: '0 0 0.5rem 0' }}>Add New Country</p>
<p style={{ textAlign: 'center', fontSize: '10px' }}>Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut error facere maxime sequi
quibusdam quidem harum cumque deleniti</p>
</div>
{/* below is the add country modal */}
<div class="modal fade" id="exampleModalCenter_country" tabindex="-1"
role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
{/* The main modal body starts below */}
<div class="modal-content" >
<div class="modal-header">
<div style={{ display: 'flex', alignItems: 'center', columnGap:
'1rem' }}>
<img src={require('../public/addProduct.svg')}
style={{ width: '40px' }} alt="addProduct" />
<h5 class="modal-title" id="exampleModalLongTitle">Add New
Country</h5>
</div>
{/* close button */}
<div class="closebtnmodl" data-bs-dismiss="modal" aria-
label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0
8 0a8 8 0 0 0 0 16z" />
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-
2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646
2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
</div>
</div>
{/* below is the modal body containing the input fields */}
<div class="modal-body">
<div className="form-group">
<label htmlFor="name" className="col-form-
label">Path<span>*</span></label>
<input style={{ background: '#f8f8f8', border: '2px solid
#dddddd', padding: '1rem', borderRadius: '14px' }} type="text" className="form-
control" id="name" value={path} placeholder="Path" onChange={(e) => this.setState({
path: e.target.value })} />
</div>
<div className="form-group">
<label htmlFor="inquiry" className="col-form-
label">Title<span>*</span></label>
<input style={{ background: '#f8f8f8', border: '2px solid
#dddddd', padding: '1rem', borderRadius: '14px' }} className="form-control"
rows="4" cols="50" name="Comment" placeholder="Title" value={title}
validations={[this.required]} onChange={(e) => this.setState({ title:
e.target.value })}>
</input>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"
onClick={this.handleSubmit}>Save changes</button>
</div>
</div>
</div>
</div>

<div className="dbcards" style={this.cardstyl}>

<img src={require('../public/settng.svg')} style={{ width: '70px',
padding: '1rem 0 1rem 0' }} alt="settings" />
<p style={{ textAlign: 'center', fontWeight: '700', color: 'dimgrey',
margin: '0 0 0.5rem 0' }}>Settings</p>
<p style={{ textAlign: 'center', fontSize: '10px' }}>Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut error facere maxime sequi
quibusdam quidem harum cumque deleniti</p>
</div>

<div className="dbcards" style={this.cardstyl}>

<img src={require('../public/logout.svg')} style={{ width: '70px',
padding: '1rem 0 1rem 0' }} alt="signout" />
<p style={{ textAlign: 'center', fontWeight: '700', color: 'dimgrey',
margin: '0 0 0.5rem 0' }}>LogOut</p>
<p style={{ textAlign: 'center', fontSize: '10px' }}>Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut error facere maxime sequi
quibusdam quidem harum cumque deleniti</p>
</div>
 </div>
</div>
</section>
</>

);
}
}

const mapStateToProps = state => {

return { translation: state.translation }
};

export default compose(connect(mapStateToProps, null), withRouter)(UserDashboard);