import { CSSProperties, Dispatch, SetStateAction } from 'react';
import { borderCN, cornerCN, fieldIndex, isHit } from '../helpers';
import { HitDispatchType, HitType, TargetPreviewType, TargetType } from '../interfaces';

function BorderTiles({ count, actions: { setTarget, setTargetPreview, hits, DispatchHits } }: { count: number, actions: { setTarget: Dispatch<SetStateAction<TargetType>>, setTargetPreview: Dispatch<SetStateAction<TargetPreviewType>>, hits: HitType[], DispatchHits: Dispatch<HitDispatchType> } }) {
    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: x + 1, y: y + 1 })
        }
    }
    return <>
        {tilesProperties.map(({ key, classNameString, isGameTile, x, y }) => {
            return <div
                key={key}
                className={classNameString}
                style={{ '--x': x, '--y': y } as CSSProperties}
                onClick={() => {
                    if (!isGameTile && !isHit(hits, x, y).length)
                        return;
                    setTarget(t => {
                        if (t.x === x && t.y === y) {
                            DispatchHits({ type: 'fireMissle', payload: { hit: (x + y) % 2 !== 0, x, y } });
                            return { show: false, x, y };
                        } else {
                            return { show: true, x, y };
                        }
                    });

                }}
                onMouseEnter={() => setTargetPreview(e => ({ ...e, newX: x, newY: y, shouldShow: isGameTile }))}
            ></div>
        })}
    </>
}

export default BorderTiles;