import React , { FC , useCallback , useEffect , useState } from 'react' ; import { Rnd } from 'react-rnd' ; import * as Styled from './Window.styles' ; import { FiSquare , FiX } from 'react-icons/fi' ; import Paragraph from '../Typography/Paragraph/Paragraph' ; import Image from 'next/image' ; import { generateRandomNumberInRange } from '../../utils/helper-functions' ; export interface Props { windowName : string ; windowIcon : string ; size : { height : number ; width : number ; } ; isOpen : boolean ; closeWindow : ( ) => void ; } function param { string } windowName param { string } windowIcon param { object } size param { isOpen } boolean param { function } closeWindow returns { JSX . Element } const Window = ( { size , windowName , children , isOpen , closeWindow , windowIcon , } ) => { const shiftOnX = generateRandomNumberInRange ( - 400 , 100 ) ; const shiftOnY = generateRandomNumberInRange ( - 100 , 100 ) ; const [ isWindowExpanded , setIsWindowExpanded ] = useState ( false ) ; const [ clientWidth , setClientWidth ] = useState ( 800 ) ; const [ clientHeight , setClientHeight ] = useState ( 600 ) ; const [ windowPosition , setWidowPosition ] = useState ( { x : ( clientWidth + shiftOnX ) / 2 , y : ( 100 + shiftOnY ) / 2 , } ) ; const [ windowSize , setWindowSize ] = useState ( { width : size . width , height : size . height , } ) ; const handleCloseWindow = useCallback ( ( ) => { setIsWindowExpanded ( false ) ; closeWindow ( ) ; } , [ closeWindow ] ) ; useEffect ( ( ) => { setClientWidth ( document . body . clientWidth ) ; setClientHeight ( document . body . clientHeight ) ; } , [ ] ) ; return ( < Rnd size = { { width : isWindowExpanded ? clientWidth : windowSize . width , height : isWindowExpanded ? clientHeight - 50 : windowSize . height , } } position = { { x : isWindowExpanded ? 0 : windowPosition . x , y : isWindowExpanded ? 0 : windowPosition . y , } } onDragStop = { ( e , d ) => { setWidowPosition ( { x : d . x , y : d . y } ) ; } } onResizeStop = { ( e , direction , ref ) => { setWindowSize ( { width : parseInt ( ref . style . width ) , height : parseInt ( ref . style . height ) , } ) ; } } minWidth = "300" minHeight = "300" bounds = "parent" > < Styled . Container isOpen = { isOpen } > < Styled . Navigation > < Styled . WindowInfo > < Image src = { windowIcon } alt = { windowName } height = { 20 } width = { 20 } quality = { 90 } objectFit = { 'contain' } / > < Paragraph margin = { '0' } > { windowName } < /Paragraph> < /Styled.WindowInfo> < Styled . ButtonWrapper > < Styled . NavButton variant = { 'expand' } onClick = { ( ) => { setIsWindowExpanded ( ( prev ) => ! prev ) ; } } > < FiSquare className = { 'icon-expand' } /> < /Styled.NavButton> < Styled . NavButton variant = { 'close' } onClick = { handleCloseWindow } > < FiX className = { 'icon-x' } /> < /Styled.NavButton> < /Styled.ButtonWrapper> < /Styled.Navigation> < Styled . Content > { children } < /Styled.Content> < /Styled.Container> < /Rnd>); } ; export default Window ;