text: import React from "react";
  import Relationship from "./Relationship";
  import { deepClone } from "../../support/Utils";
  import TypeChecking from "../../support/TypeChecking";
  import RelStyles from "./RelationshipList.styles";
  
  export default class RelationshipList extends React.Component {
  	constructor(props) {
  		super(props);
  
  		if (TypeChecking.isArray(props.list) && props.list.length > 0) {
  			const rightMax = props.list.length < 5 ? props.list.length : 4;
  			this.state = {
  				list: props.list.slice(0, rightMax),
  				leftIndex: 0,
  				rightIndex: rightMax,
  			};
  		} else {
  			this.state = {
  				list: null,
  				leftIndex: null,
  				rightIndex: null,
  			};
  		}
  	}
  
  	componentDidUpdate(prevProps) {
  		const getLength = (props) => (TypeChecking.isArray(props.list) ? props.list.length : null);
  		if (getLength(prevProps) !== getLength(this.props)) {
  			const rightMax = this.props.list.length < 5 ? this.props.list.length : 4;
  			this.setState({
  				list: this.props.list.slice(0, rightMax),
  				leftIndex: 0,
  				rightIndex: rightMax,
  			});
  		}
  	}
  
  	render() {
  		let links = null;
  		if (this.props.relationshipsLoaded) {
  			if (TypeChecking.isArray(this.state.list) && this.state.list.length > 0) {
  				const showNavigation = this.props.list.length > 4;
  				links = (
  					<RelStyles.CardsContainer>
  						{showNavigation ? <RelStyles.Arrow onClick={this.handleLeftClick} /> : null}
  						<RelStyles.CardsInnerContainer>
  							{this.state.list.map((item) => {
  								return (
  									<Relationship
  										key={item.url}
  										onRelLinkClicked={this.props.onRelLinkClicked}
  										entity={item}
  									/>
  								);
  							})}
  						</RelStyles.CardsInnerContainer>
  						{showNavigation ? (
  							<RelStyles.Arrow onClick={this.handleRightClick} className={"right"} />
  						) : null}
  					</RelStyles.CardsContainer>
  				);
  			}
  		} else {
  			links = (
  				<RelStyles.Loading>
  					Loading
  					<span className="one">.</span>
  					<span className="two">.</span>
  					<span className="three">.</span>
  				</RelStyles.Loading>
  			);
  		}
  		return (
  			<RelStyles.Container>
  				<h3>{this.props.translationService.getPhrase(this.props.titleTranslationKey)}</h3>
  				{links}
  			</RelStyles.Container>
  		);
  	}
  
  	handleLeftClick = () => {
  		if (this.state.leftIndex > 0) {
  			let newList = deepClone(this.state.list);
  			newList.pop(); // Remove the element to the right
  			newList.unshift(this.props.list[this.state.leftIndex - 1]); // Add to the beginning of the array
  			this.setState({
  				list: newList,
  				leftIndex: this.state.leftIndex - 1,
  				rightIndex: this.state.rightIndex - 1,
  			});
  		}
  	};
  
  	handleRightClick = () => {
  		if (this.state.rightIndex < this.props.list.length - 1) {
  			let newList = deepClone(this.state.list);
  			newList.shift(); // Remove the last element
  			newList.push(this.props.list[this.state.rightIndex + 1]); // Add to the left the next element
  			this.setState({
  				list: newList,
  				leftIndex: this.state.leftIndex + 1,
  				rightIndex: this.state.rightIndex + 1,
  			});
  		}
  	};
  }
  