import React from "react"
import { connect } from "react-redux"
import DealsList from "./DealsList";
import SingleDeal from "./SingleDeal";
import { getDeals, getDealOffers, getDealDocuments, getDealContracts } from "../../actions";

class AllContractsModal extends React.Component
{
	constructor(props)
	{
		super(props);
	}

	render()
	{
		const { open, close, activeContract, handleContractSelected } = this.props

		return (
			<div className={open ? "fade opened" : "fade"}>
				<div className="contractStatus_modal all_contracts_modal">
					<div className="modal_header">
						<p className="modal_title">Статусы сделок</p>
						<button className="modal_close" onClick={close}></button>
					</div>
					<div className="modal_body">
						<div className="contractStatus_list">
							<div className="single_status">
								<div>
									<p>Сделка 1</p>
									<span></span>
									<i className="status_1"></i>
										<p>Выбор КП</p>
								</div>
								<div>
									<p>Сделка 1</p>
									<span></span>
									<i className="status_2"></i>
									<p>Программа финансирования</p>
								</div>
								<div>
									<p>Сделка 1</p>
									<span></span>
									<i className="status_3"></i>
									<p>Сборка пакета документов</p>
								</div>
								<div className="current">
									<p>Сделка 1</p>
									<span></span>
									<i className="status_4"></i>
									<p>Проверка документов</p>
								</div>
								<div>
									<p>Сделка 1</p>
									<span></span>
									<i className="status_5"></i>
									<p>Принятие решения по заявке</p>
								</div>
								<div>
									<p>Сделка 1</p>
									<span></span>
									<i className="status_6"></i>
									<p>Оформление лизинга</p>
								</div>
								<div>
									<p>Сделка 1</p>
									<span></span>
									<i className="status_7"></i>
									<p>Выбор типа подписания</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}

class DealsStatus extends React.Component 
{
	constructor(props) 
	{
		super(props)
		this.state = {
			status: 2, 
			currentContractModalOpened: false, 
			allContractModalOpened: false, 
			currentSelected: null, 
			dealSelected: undefined, 
			deals: undefined, 
		}
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		console.log("DealsStatus", "getDerivedStateFromProps", { nextProps });
		return {
			deals: nextProps.deals, 
		}
	}

	componentDidMount() 
	{
		const { dispatch } = this.props;
		getDeals({ dispatch });
	}

	componentDidUpdate(prevProps, prevState) { }

	_onDealsUpdate = () => 
	{
		console.log("_onDealsUpdate");
		return new Promise((resolve) => 
		{
			const { dispatch } = this.props;

			getDeals({ dispatch, update: true })
			.then(() => 
			{
				resolve();
			})
			.catch(() => 
			{
				resolve();
			});
		});
	}

	_onDealContractsUpdate = (deal_id) => 
	{
		console.log("_onDealContractsUpdate");

		const { dispatch } = this.props;
		getDealContracts({ dispatch, deal_id, });
	}

	_handleModalToggle = (modal) => 
	{
		if (modal === "current") 
		{
			this.setState({
				currentContractModalOpened: !this.state.currentContractModalOpened
			})
		} 
		else 
		{
			this.setState({
				allContractModalOpened: !this.state.allContractModalOpened
			})
		}
	}

	_handleContractSelected = (index) => 
	{
		this.setState({
			currentSelected: index
		})
	}

	_handle_onSelectDeal = (deal_id) => 
	{
		const { dispatch } = this.props;

		console.log("_handle_onSelectDeal", { deal_id });
		this.setState({ dealSelected: deal_id });

		getDealOffers({ dispatch, deal_id, });
		getDealDocuments({ dispatch, deal_id, });
		getDealContracts({ dispatch, deal_id, });
	}

	_handle_onCloseDeal = () => 
	{
		this.setState({ dealSelected: undefined });
	}

	render() 
	{
		const { currentContractModalOpened, allContractModalOpened, currentSelected, dealSelected, deals, status, } = this.state
		const { questionnaire_status, onQuestionnaire, } = this.props;

		return (
			<>
				{ deals.list !== undefined && deals.list !== null && deals.list.length > 0 && (
					<>
						<div>
							<p className="deals_list_title">Статусы сделок</p>
						</div>
						<DealsList 
							dispatch={ this.props.dispatch } 
							router={ this.props.router } 
							status={ status } 
							deals={ deals } 
							questionnaire_status={ questionnaire_status } 
							dealSelected={ dealSelected } 
							onSelectDeal={ this._handle_onSelectDeal } 
							onCloseDeal={ this._handle_onCloseDeal } 
							onDealsUpdate={ this._onDealsUpdate } 
							onDealContractsUpdate={ this._onDealContractsUpdate } 
							onQuestionnaire={ onQuestionnaire } 
						/>
						{/*}
						<AllContractsModal
							open={allContractModalOpened}
							close={() => {
								this._handleModalToggle("all")
							}}
							activeContract={currentSelected}
							handleContractSelected={this._handleContractSelected}
						/>
						{*/}
					</>
				) }
			</>
		)
	}
}

function mapStateToProps(state, ownProps) 
{
	console.log({ "DealsStatus.state": state });
	return {
		deals: state.deals, 
	}
}

export default connect(mapStateToProps)(DealsStatus)