import * as THREE from "three";
import { EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
import { BlendFunction } from "postprocessing";
import {
  useDeletableFloorItem,
  useSelectedActionSphere,
  useSelectedPath,
  useSelectedWallItem,
  useselectedFloorItem,
} from "../../../store/store";
import * as Types from "../../../types/world/worldTypes";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { useEffect } from "react";

export default function PostProcessing() {
  const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
  const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
  const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem();
  const { selectedActionSphere } = useSelectedActionSphere();
  const { selectedPath } = useSelectedPath();

  function flattenChildren(children: any[]) {
    const allChildren: any[] = [];
    children.forEach((child) => {
      allChildren.push(child);
      if (child.children && child.children.length > 0) {
        allChildren.push(...flattenChildren(child.children));
      }
    });
    return allChildren;
  }

  return (
    <>
      <EffectComposer autoClear={false}>
        <N8AO
          color="black"
          aoRadius={20}
          intensity={7}
          distanceFalloff={4}
          aoSamples={32}
          denoiseRadius={6}
          denoiseSamples={16}
        />
        {deletableFloorItem && (
          <Outline
            selection={flattenChildren(deletableFloorItem.children)}
            selectionLayer={10}
            width={3000}
            blendFunction={BlendFunction.ALPHA}
            edgeStrength={5}
            resolutionScale={2}
            pulseSpeed={0}
            visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
            hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
            blur={true}
            xRay={true}
          />
        )}
        {selectedWallItem && (
          <Outline
            selection={selectedWallItem.children[1].children[0].children.filter(
              (child: Types.Mesh) => child.name !== "CSG_REF"
            )}
            selectionLayer={10}
            width={3000}
            blendFunction={BlendFunction.ALPHA}
            edgeStrength={5}
            resolutionScale={2}
            pulseSpeed={0}
            visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
            hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
            blur={true}
            xRay={true}
          />
        )}
        {selectedFloorItem && (
          <Outline
            selection={flattenChildren(selectedFloorItem.children)}
            selectionLayer={10}
            width={3000}
            blendFunction={BlendFunction.ALPHA}
            edgeStrength={5}
            resolutionScale={2}
            pulseSpeed={0}
            visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
            hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
            blur={true}
            xRay={true}
          />
        )}
        {selectedActionSphere && (
          <Outline
            selection={[selectedActionSphere.point]}
            selectionLayer={10}
            width={750}
            blendFunction={BlendFunction.ALPHA}
            edgeStrength={15}
            resolutionScale={2}
            pulseSpeed={0}
            visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
            hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
            blur={true}
            xRay={true}
          />
        )}
        {selectedPath && (
          <Outline
            selection={flattenChildren(selectedPath.group.children)}
            selectionLayer={10}
            width={750}
            blendFunction={BlendFunction.ALPHA}
            edgeStrength={15}
            resolutionScale={2}
            pulseSpeed={0}
            visibleEdgeColor={0x6f42c1}
            hiddenEdgeColor={0x6f42c1}
            blur={true}
            xRay={true}
          />
        )}
      </EffectComposer>
    </>
  );
}