import React, { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react';
import { Canvas } from './Canvas';
import { CanvasButtonsList } from './CanvasButtonsList';
import { canvasTextureContext } from '../../context/canvasTextureContext';
import { canvasBackgroundContext } from '../../context/canvasBackgroundContext';
import { PlusIcon } from '../../Icons/PlusIcon';
import { PlusLoopIcon } from '../../Icons/PlusLoopIcon';
import { MinusIcon } from '../../Icons/MinusIcon';
import { PanelIcon } from '../../Icons/PanelIcon';
import { ModeNames } from '../../types/namesList';
import styles from './canvascontainer.module.css';
import { canvasHandFrameDataContext } from '../../context/canvasHandFrameDataContext';
import classNames from 'classnames';
import { canvasModeContext } from '../../context/canvasModeContext';
import { Box } from '@mui/material';
import { Total } from '../OptionsContainer/Total';
import { CanvasContainerBlock } from './CanvasContainer.styles';
import { Header } from '../Header';
import { createPortal } from 'react-dom';
import { collectionsContext } from "../../context/collectionsContext";

interface ICanvasContainerProps {
    mode: string;
    isSeamless: boolean;
    isSigned: boolean;
}

export function CanvasContainer(props: ICanvasContainerProps) {
    const { mode, isSeamless, isSigned } = props;
    const { imgData } = useContext(canvasTextureContext);
    const { backgroundData } = useContext(canvasBackgroundContext);
    const { isFlipped, setIsFlipped } = useContext(canvasModeContext);
    // const [canvasWidth, setCanvasWidth] = useState<number | undefined>(0);
    const [canvasWidth, setCanvasWidth] = useState<number>(0);
    const [addGridSide, setAddGridSide]: ['right' | 'left', Dispatch<SetStateAction<any>>] = useState('right');
    const url = new URL(window.location.href);
    const defaultDragX = url.searchParams.get('dragX') && url.searchParams.get('dragX') !== 'NaN' ? url.searchParams.get('dragX') : 0;
    const defaultGridCnt = url.searchParams.get('gridCnt') ? url.searchParams.get('gridCnt') : 0;
    const [gridCnt, setGridCnt] = useState(defaultGridCnt ? parseInt(defaultGridCnt) : 7);
    const { fullscreen, setFullscreen } = useContext(canvasModeContext);
    const [isDesktop, setDesktop] = useState(window.innerWidth > 991);
    const storedDragX = localStorage.getItem('dragX') !== 'Nan' ? localStorage.getItem('dragX') : 0;
    const { handFrameData } = useContext(canvasHandFrameDataContext);
    const [dragX, setDragX] = useState<any>(storedDragX ? storedDragX : defaultDragX);
    const minGridCnt = 7;
    const maxGridCnt = 12;

    const handlePlusClick = (side: string) => {
        const newGridCnt = gridCnt + 1 > maxGridCnt ? gridCnt : gridCnt + 1;
        setGridCnt(newGridCnt);
        setAddGridSide(side);
    };
    const handleMinusClick = (side: string) => {
        const newGridCnt = gridCnt - 1 < minGridCnt ? gridCnt : gridCnt - 1;
        setGridCnt(newGridCnt);
        setAddGridSide(side);
    };

    useEffect(() => {
        function handleResize() {
            if(document === undefined) return;
            const width = document.getElementById('canvas-container')!.clientWidth;
            setCanvasWidth(width);
        }
        window.addEventListener('resize', handleResize);
        setTimeout( () => {
            handleResize();
        }, 500);

        return () => window.removeEventListener('resize', handleResize);
    }, []);

    useEffect(() => {
        if(canvasWidth && typeof defaultDragX === 'string') setDragX(parseInt(defaultDragX) * (canvasWidth / gridCnt / 95));
    }, [canvasWidth]);


    function calcTotalWidth(props: { width: number; height: number }) {
        const { width, height } = props;

        return Math.round((((Math.round(width) / 100) * Math.round(height)) / 100) * 10000) / 10000;
    }

    const calcOptionSquare = () => {
        const width = handFrameData.width;
        const height = handFrameData.height;
        return Math.round(calcTotalWidth({ width, height }) * 100) / 100;
    };

    useEffect(() => {
        const domContainer = document.querySelector('#constructor_app'),
            ajaxMode = domContainer?.getAttribute('data-set-ajax-mode') === 'true'
        ;
        if(ajaxMode) return;
        if(fullscreen) {
            document.body.style.overflow = 'hidden';
            window.dispatchEvent(new Event('resize'));
        } else {
            document.body.style.overflow = 'visible';
            window.dispatchEvent(new Event('resize'));
        }
    }, [fullscreen]);

    useEffect(() => {
        localStorage.removeItem('dragX');

    }, [imgData]);

    if(!fullscreen) {
        localStorage.setItem('NotFullscreen', canvasWidth!.toString());
    }

    const changeScreenType = (val: boolean) => {
        setFullscreen(val);
        if(val) {
            localStorage.setItem('NotFullscreen', canvasWidth!.toString());
            const fullscreenCanvasWidth = localStorage.getItem('fullscreenCanvasWidth');
            const NotFullscreen = localStorage.getItem('NotFullscreen');
            const scaleX = fullscreenCanvasWidth !== null && NotFullscreen !== null ? +fullscreenCanvasWidth/+NotFullscreen : 1;
            localStorage.setItem('dragX', (dragX * scaleX).toString());

        } else {
            localStorage.setItem('fullscreenCanvasWidth', canvasWidth!.toString());
            const fullscreenCanvasWidth = localStorage.getItem('fullscreenCanvasWidth');
            const NotFullscreen = localStorage.getItem('NotFullscreen');
            const scaleX = fullscreenCanvasWidth !== null && NotFullscreen !== null ? +fullscreenCanvasWidth/+NotFullscreen : 1;
            localStorage.setItem('dragX', (dragX / scaleX).toString());
        }
    }

    const defaultContainer = document.querySelector('#root') ? document.querySelector('#root') : document.querySelector('#constructor_app');

    const { collectionsData } = useContext(collectionsContext);
    const curSectionData = JSON.parse(localStorage!.getItem(`sectionData_${collectionsData.sectionId}`)!);
    const textureImg = imgData.items.find((item: any) => {
        return item.id == curSectionData?.texture;
    })?.img;

    return (
        <CanvasContainerBlock>
            <Box
                sx={{
                    position: 'sticky',
                    top: '60px',
                }}
            >
                <div>
                    {defaultContainer && createPortal(
                        <div
                            onClick={() => {
                                changeScreenType(false);
                            }}
                            className={classNames(styles.closeButton, 'js-constructor-app-close')}>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 5L5 19M5 5L9.5 9.5M12 12L19 19" stroke="#000000" strokeWidth="1.5"
                                      strokeLinecap="round" strokeLinejoin="round"></path>
                            </svg>
                        </div>,
                        defaultContainer
                    )}
                    <div className={classNames(styles.zoomContainer)}>
                        <Header/>
                        <div id={'canvas-container'} className={styles.containerInner}>
                            {canvasWidth && (
                                <Canvas
                                    img={textureImg ? textureImg : imgData.img}
                                    backgroundImg={backgroundData.img}
                                    backgroundColor={backgroundData.backgroundColor ?? ''}
                                    mode={mode}
                                    // isSeamless={isSeamless}
                                    isSeamless={backgroundData.isSeamless || isSeamless}
                                    isSigned={isSigned}
                                    canvasWidth={canvasWidth}
                                    isFlipped={isFlipped}
                                    defaultGridCnt={7}
                                    gridCnt={gridCnt}
                                    addGridSide={addGridSide}
                                    dragX={dragX}
                                    onDragXChange={newDragX => {
                                        setDragX(newDragX);
                                    }}
                                />
                            )}
                            {mode === ModeNames.Panels && (
                                <div className={`${styles.plusMinusContainer} ${styles.left}`}>
                                    <div className={`${styles.iconContainer} ${gridCnt < 12 ? '' : styles.disabled}`}
                                         onClick={() => handlePlusClick('right')}>
                                        <PlusIcon/>
                                    </div>
                                    <div className={styles.iconPanelContainer}>
                                        <PanelIcon/>
                                    </div>
                                    <div className={`${styles.iconContainer} ${gridCnt > 7 ? '' : styles.disabled}`}
                                         onClick={() => handleMinusClick('right')}>
                                        <MinusIcon/>
                                    </div>
                                </div>
                            )}

                            {mode === ModeNames.Panels && (
                                <div className={`${styles.plusMinusContainer} ${styles.right}`}>
                                    <div className={`${styles.iconContainer} ${gridCnt > 7 ? '' : styles.disabled}`}
                                         onClick={() => handleMinusClick('right')}>
                                        <MinusIcon/>
                                    </div>
                                    <div className={styles.iconPanelContainer}>
                                        <PanelIcon/>
                                    </div>
                                    <div className={`${styles.iconContainer} ${gridCnt < 12 ? '' : styles.disabled}`}
                                         onClick={() => handlePlusClick('right')}>
                                        <PlusIcon/>
                                    </div>
                                </div>
                            )}
                        </div>

                        {isDesktop &&
                            <div className={[styles.button, styles.fitContent].join(' ')}
                                 onClick={() => changeScreenType(!fullscreen)}>
                                <PlusLoopIcon/>
                                <span
                                    className={fullscreen ? styles.buttonZoomActive : ''}>{fullscreen ? 'Уменьшить' : 'Увеличить'}</span>
                            </div>
                        }

                        {isDesktop &&
                            <div>
                                <Total/>
                                {canvasWidth && (
                                    <CanvasButtonsList
                                        onFlipClick={newIsFlipped => {
                                            setIsFlipped(newIsFlipped);
                                        }}
                                        isFlipped={isFlipped}
                                        gridCnt={gridCnt}
                                        dragX={Math.round(dragX / (canvasWidth / gridCnt / 95))}
                                    />
                                )}
                                {/*<Buttons/>*/}
                            </div>
                        }
                    </div>
                </div>
            </Box>
        </CanvasContainerBlock>
    );
}