import React from "react";
import { SpinnerCircular } from "spinners-react";
import DateInput from "../../../../components/DatePicker";

export default class VariantsList extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			opened: [], 
		};
	}

	componentDidMount() 
	{
	}

	_handle_onVariant = (type) => 
	{
		const { blocked, loading } = this.props;

		if(!blocked && !loading)
		{
			this.props.onVariant(type);
		}
	}

	_getVariantHelp = (type) => 
	{
		const { variants } = this.props;

		for(let i in variants.types)
		{
			if(variants.types[i].name === type)
			{
				return variants.types[i].information;
			}
		}

		return null;
	}

	_checkVariant = (type) => 
	{
		const { variants } = this.props;

		for(let i in variants.types)
		{
			if(variants.types[i].name === type)
			{
				if(variants.types[i].disable === true)
				{
					return true;
				}

				return false;
			}
		}

		return false;
	}

	_handle_onOptions = () => 
	{
		this.props.onOptions();
	}

	_handle_onMobileHelp = (index) => 
	{
		if(window.innerWidth < 768)
		{
			const opened = [ ...this.state.opened ];

			if (opened.indexOf(index) === -1) 
			{
				opened.push(index);
			} 
			else 
			{
				opened.splice(opened.indexOf(index), 1);
			}
		
			this.setState({ opened: opened });
		}
	}

	render() 
	{
		const { number, variants, variants_types, selected, blocked, loading } = this.props;
		const { opened } = this.state;
		console.log(variants_types);

		return (
			<div className="block" style={{ position: "relative" }}>
				<p className="title">Варианты изменения графиков</p>
				<div style={ loading ? { opacity: 0.5, } : {} }>
					<form onSubmit={ (e) => e.preventDefault() }>
						{ variants_types !== undefined && variants_types !== null && variants_types.map((variant, index) => 
						{
							const disabled = this._checkVariant(variant.type);
							const help = this._getVariantHelp(variant.type);

							console.log("opened", opened);

							return (
								<div className="form_field" key={ index }>
									<input type="checkbox" hidden id={ `variant_${ index }` } name="variants" disabled={ disabled } checked={ selected.indexOf(variant.type) > -1 ? true : false } onChange={ () => { this._handle_onVariant(variant.type) } }/>
									<label htmlFor={ `variant_${ index }` } className="unselectable" 
									style={ disabled ? { color: "#A8026B", textDecoration: "line-through", } : {} }>{ variant.title }</label>
									{ help !== null && (
										<div className="help_tooltip">
											<div className="help_icon" onClick={ () => this._handle_onMobileHelp(variant.type) }>
												<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
													<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
													<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
													<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
												</svg>
											</div>
											<div className={`help_content ${ opened.indexOf(variant.type) > -1 && "opened" }`}>
												<div>
													<p className="help_tooltip_content" dangerouslySetInnerHTML={{ __html: help }}/>
													<p className="button" onClick={ () => this._handle_onMobileHelp(variant.type) }>Закрыть</p>
												</div>
											</div>
										</div>
									) }
								</div>
							)
						}) }
						{ selected !== undefined && selected !== null && (
							<button className="button button-blue" disabled={ blocked || loading ? true : selected.length > 0 ? false : true } onClick={ this._handle_onOptions }>Далее</button>
						)}
					</form>
				</div>
				{ loading && (
					<div style={{ position: "absolute", left: "50%", top: "50%" }}>
						<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" style={{ marginTop: "-45px", marginLeft: "-45px", }}/>
					</div>
				) }
			</div>
		)
	}
}