// eslint-disable-next-line no-unused-vars
import React, { FC, Fragment } from 'react';
import { Icons } from "../../Icons"
import cx from 'classnames';

import { SidePanelProps } from './SidePanel.types';

import './sidepanel.scss';

const SidePanel: FC<SidePanelProps> = ({
	children,
	isOpen = false,
	hiddenButton = false,
	position = "right",
	style = {},
	contentStyle = {},
	//className = "",
	classSidePanel = "",
	classPanelContent = "gtc-rc-side-panel-content",
	onToggle = () => {},
}) => {
	let icon = ""
	if (position === "right"){
		icon = isOpen ? 'navigate_next' : 'navigate_before';
	} else {
		icon = isOpen ?  'navigate_before' : 'navigate_next';
	}
	

	const SidePanelbutton = () => (
		<span
			className={`gtc-rc-side-panel-button gtc-rc-side-panel-button-${position}`}
			onClick={onToggle}
		>
			<Icons name={icon} style={{fontSize: "28px !important"}}/>
		</span>
		
	)

	return (
		<Fragment>
{/* 			<div className={ `${ (isOverlay && isOpen) && "gtc-rc-overlay-panel"}` }></div>*/}
			<div
 				data-testid="JestSidePanel"
                id='id_sidePanel'
				style={style}
				className={`gtc-rc-side-panel ${isOpen ? 'gtc-rc-shown-' + position : ''} gtc-rc-side-panel-${position} ${classSidePanel}`}
			>
				<>
					{!hiddenButton && (
						<SidePanelbutton/>
					)}

					<div 
						className={cx(classPanelContent)}
						style={contentStyle}
						data-testid="JestSidePanelContent"
					>
						{children}
					</div>

				</>
			</div>
		</Fragment>
	
	);
};

export default SidePanel;

