import { CSSProperties } from 'react';
import { borderCN, cornerCN, fieldIndex } from '../helpers';
import { TargetPreviewType, TargetType } from '../interfaces';

function BorderTiles({count, targets: {setTarget, setTargetPreview}}: {count: number, targets: {setTarget: React.Dispatch<React.SetStateAction<TargetType>>, setTargetPreview: React.Dispatch<React.SetStateAction<TargetPreviewType>>}}) {
    let tilesProperties: {
        key: number,
        isGameTile: boolean,
        classNameString: string,
        x: number,
        y: number
    }[] = [];

    for (let y = 0; y < count+2; y++) {
        for (let x = 0; x < count+2; x++) {
            const key = fieldIndex(count, x, y);
            const cornerReslt = cornerCN(count, x, y);
            const borderType = cornerReslt ? cornerReslt : borderCN(count, x, y);
            const isGameTile = x > 0 && x < count+1 && y > 0 && y < count+1;
            const classNames = ['border-tile'];
            if (borderType)
                classNames.push('edge', borderType);
            if (isGameTile)
                classNames.push('game-tile');
            const classNameString = classNames.join(' ')
            tilesProperties.push({key, classNameString, isGameTile, x, y})
        }
    }
    return <>
        {tilesProperties.map(({key, classNameString, isGameTile, x, y}) => {
            return <div
                key={key}
                className={classNameString}
                style={{'--x': (x + 1), '--y': (y + 1)} as CSSProperties}
                onClick={() => {
                    if (isGameTile)
                    setTarget({ show: true, x, y });
                }}
                onMouseEnter={() => setTargetPreview(e => ({...e, newX: x, newY: y, shouldShow: isGameTile}))}
            ></div>
        })}
    </>
}

export default BorderTiles;