/**
 * Left panel of the log-view. Houses settings, filters, client list, etc. It's a column of content, each section is housed inside of an accordion.
 */
import React, { Component } from "react"; // eslint-disable-line
import LoggerClientControlList from "./ClientList/LoggerClientControlList";
import LoggerDisplayControl from "./Filters/LoggerDisplayControl";
import QuickViews from "./QuickViews";

import Settings from "./Settings/Settings";

interface AccordionProps {
	label: string;
	className?: string;
}
interface AccordionState {
	visible: boolean;
}

class Accordion extends Component<AccordionProps, AccordionState> {
	constructor(props: AccordionProps) {
		super(props);
		this.state = {
			visible: true,
		};
		this.toggleVisibility = this.toggleVisibility.bind(this);
	}

	toggleVisibility() {
		this.setState({
			visible: !this.state.visible,
		});
	}

	render() {
		let classes = "left-panel-accordion ";

		if (this.props.className) {
			classes = classes + this.props.className;
		}
		let contentClasses = "left-panel-accordion-content";
		if (this.state.visible) {
			contentClasses = `${contentClasses} visible `;
		}
		return (
			<div className={classes}>
				<div
					onClick={this.toggleVisibility}
					className="left-panel-accordion-label-wrap"
					tabIndex={0}
					aria-expanded={this.state.visible}
					role="button"
					onKeyDown={(e) => {
						if (e.key === "Enter") {
							this.toggleVisibility();
						}
					}}
				>
					<span className="left-panel-accordion-visiblity-indicator">
						{this.state.visible && <span className="ff-arrow-down"> &#9660;</span>}
						{!this.state.visible && <span className="ff-arrow-up"> &#9654;</span>}
					</span>
					{this.props.label}
				</div>
				<div className={contentClasses}>{this.state.visible && this.props.children}</div>
			</div>
		);
	}
}

interface LeftPanelProps {
	fileMode?: boolean;
}
class LeftPanel extends Component<LeftPanelProps> {
	render() {
		return (
			<div className="left-panel">
				<QuickViews />
				<Accordion label="Settings">
					<Settings />
				</Accordion>
				<Accordion label="Filters">
					<LoggerDisplayControl />
				</Accordion>
				<Accordion className="client-list-accordion" label="Components and Services">
					<LoggerClientControlList fileMode={this.props.fileMode} />
				</Accordion>
			</div>
		);
	}
}

export default LeftPanel;