import * as React from "react";
import parse from 'html-react-parser';

interface ProductDetailFooterProps {
	productDescription: string
}

class ProductDetailFooter extends React.Component<ProductDetailFooterProps> {
	state = {
		showProductInfo: true,
		showProductIngredients: false,
		showProductSomething: false
	}

	showHideComponent = (name: string) => {
		switch (name) {
			case "showProductInfo":
				this.setState({ showProductInfo: true, showProductIngredients: false, showProductSomething: false });
				break;
			case "showProductIngredients":
				this.setState({ showProductInfo: false, showProductIngredients: true, showProductSomething: false });
				break;
			case "showProductSomething":
				this.setState({ showProductInfo: false, showProductIngredients: false, showProductSomething: true });
				break;
			default:
				break;
		}
	}

	render() {
		const { showProductInfo, showProductIngredients, showProductSomething } = this.state;
		return (
			<div className="product__details__tab">
				<ul className="nav nav-tabs">
					<li className="nav-item">
						<a onClick={() => this.showHideComponent("showProductInfo")}
							className={"nav-link" + (showProductInfo ? " active" : "")}>O produktu</a>
					</li>
					{/* <li className="nav-item">
						<a onClick={() => this.showHideComponent("showProductIngredients")}
							className={"nav-link" + (showProductIngredients ? " active" : "")}>Slozeni</a>
					</li>
					<li className="nav-item">
						<a onClick={() => this.showHideComponent("showProductSomething")}
							className={"nav-link" + (showProductSomething ? " active" : "")}>Reviews <span>(1)</span></a>
					</li> */}
				</ul>
				<div className="tab-content">
					<div className={"tab-pane" + (showProductInfo ? " active" : "")}>
						<div className="product__details__tab__desc">
							{parse(this.props.productDescription ?? '')}
						</div>
					</div>
					<div className={"tab-pane" + (showProductIngredients ? " active" : "")}>
						<div className="product__details__tab__desc">
							<h6>Products Infomation</h6>
							<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
								Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.
								Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam
								sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo
								eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.
								Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent
								sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac
								diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante
								ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
								Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
								Proin eget tortor risus.</p>
							<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem
								ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet
								elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum
								porta. Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus
								nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>
						</div>
					</div>
					<div className={"tab-pane" + (showProductSomething ? " active" : "")}>
						<div className="product__details__tab__desc">
							<h6>Products Infomation</h6>
							<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
								Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.
								Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam
								sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo
								eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.
								Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent
								sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac
								diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante
								ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
								Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
								Proin eget tortor risus.</p>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default ProductDetailFooter;