Dwinzo_Demo/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx

import React, { useMemo, useState } from "react";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { ArrowIcon } from "../../../icons/ExportCommonIcons";

// image imports
import Arc from "../../../../assets/image/aisleTypes/Arc.png";
import Arrow from "../../../../assets/image/aisleTypes/Arrow.png";
import Arrows from "../../../../assets/image/aisleTypes/Arrows.png";
import Circle from "../../../../assets/image/aisleTypes/Circle.png";
import Dashed from "../../../../assets/image/aisleTypes/Dashed.png";
import Directional from "../../../../assets/image/aisleTypes/Directional.png";
import Dotted from "../../../../assets/image/aisleTypes/Dotted.png";
import Solid from "../../../../assets/image/aisleTypes/Solid.png";
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
import InputToggle from "../../../ui/inputs/InputToggle";

interface TextureItem {
  color: string;
  id: AisleColors;
  brief: string;
  texture: string;
}

export const aisleTextureList: TextureItem[] = [
  { color: "yellow", id: "#FBE50E", brief: "pedestrian walkways", texture: "" },
  { color: "gray", id: "#6F6F7A", brief: "basic", texture: "" },
  { color: "green", id: "#43C06D", brief: "pedestrian walkways", texture: "" },
  { color: "orange", id: "#FF711B", brief: "material flow", texture: "" },
  { color: "blue", id: "#488EF6", brief: "vehicle paths", texture: "" },
  { color: "purple", id: "#AF52DE", brief: "material flow", texture: "" },
  { color: "red", id: "#FF3B30", brief: "safety zone", texture: "" },
  { color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
  { color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
  { color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
];

const AisleProperties: React.FC = () => {
  const [collapsePresets, setCollapsePresets] = useState(false);
  const [collapseTexture, setCollapseTexture] = useState(true);

  const { aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength, isFlipped, setAisleType, setAisleColor, setAisleWidth, setDashLength, setGapLength, setDotRadius, setAisleLength, setIsFlipped } = useBuilderStore();


  const aisleTypes: {
    name: string;
    type: AisleTypes;
    id: string;
    thumbnail: string;
  }[] = [
      { name: "Solid", type: "solid-aisle", id: "1", thumbnail: Solid },
      { name: "Dotted", type: "dotted-aisle", id: "2", thumbnail: Dotted },
      { name: "Dashed", type: "dashed-aisle", id: "3", thumbnail: Dashed },
      { name: "Arrow", type: "arrow-aisle", id: "4", thumbnail: Arrow },
      { name: "Continuous Arrows", type: "arrows-aisle", id: "5", thumbnail: Arrows },
      { name: "Directional", type: "junction-aisle", id: "6", thumbnail: Directional },
      { name: "Arc", type: "arc-aisle", id: "7", thumbnail: Arc },
      { name: "Circle", type: "circle-aisle", id: "8", thumbnail: Circle },
    ];

  const handleAisleWidthChange = (value: string) => {
    const width = parseFloat(value);
    if (!isNaN(width)) {
      setAisleWidth(width);
    }
  };

  const handleDashLengthChange = (value: string) => {
    const length = parseFloat(value);
    if (!isNaN(length)) {
      setDashLength(length);
    }
  };

  const handleGapLengthChange = (value: string) => {
    const length = parseFloat(value);
    if (!isNaN(length)) {
      setGapLength(length);
    }
  };

  const handleDotRadiusChange = (value: string) => {
    const radius = parseFloat(value);
    if (!isNaN(radius)) {
      setDotRadius(radius);
    }
  };

  const handleAisleLengthChange = (value: string) => {
    const length = parseFloat(value);
    if (!isNaN(length)) {
      setAisleLength(length);
    }
  };

  const handleIsFlippedChange = () => {
    setIsFlipped(!aisleIsFlipped)
  };

  const dashLengthValue = useMemo(() => {
    return dashLength.toString();
  }, [aisleType, dashLength]);

  const dotRadiusValue = useMemo(() => {
    return dotRadius.toString();
  }, [aisleType, dotRadius]);

  const gapLengthValue = useMemo(() => {
    return gapLength.toString();
  }, [aisleType, gapLength]);

  const aisleWidthValue = useMemo(() => {
    return aisleWidth.toString();
  }, [aisleType, aisleWidth]);

  const aisleLengthValue = useMemo(() => {
    return aisleLength.toString();
  }, [aisleType, aisleLength]);

  const aisleIsFlipped = useMemo(() => {
    return isFlipped;
  }, [aisleType, isFlipped]);

  const renderAdvancedProperties = () => {
    switch (aisleType) {
      case 'dashed-aisle':
        return (
          <>
            {aisleType &&
              <>
                <InputWithDropDown
                  label="Dash Length"
                  value={`${dashLengthValue}`}
                  min={0.1}
                  step={0.1}
                  max={2}
                  onChange={handleDashLengthChange}
                />
                <InputWithDropDown
                  label="Gap Length"
                  value={`${gapLengthValue}`}
                  min={0.1}
                  step={0.1}
                  max={2}
                  onChange={handleGapLengthChange}
                />
              </>
            }
          </>
        );
      case 'dotted-aisle':
        return (
          <>
            {aisleType &&
              <>
                <InputWithDropDown
                  label="Dot Radius"
                  value={`${dotRadiusValue}`}
                  min={0.1}
                  step={0.1}
                  max={2}
                  onChange={handleDotRadiusChange}
                />
                <InputWithDropDown
                  label="Gap Length"
                  value={`${gapLengthValue}`}
                  min={0.1}
                  step={0.1}
                  max={2}
                  onChange={handleGapLengthChange}
                />
              </>
            }
          </>
        );
      case 'arrows-aisle':
        return (
          <>
            {aisleType &&
              <>
                <InputWithDropDown
                  label="Arrow Length"
                  value={`${aisleLengthValue}`}
                  min={0.1}
                  step={0.1}
                  max={2}
                  onChange={handleAisleLengthChange}
                />
                <InputWithDropDown
                  label="Gap Length"
                  value={`${gapLengthValue}`}
                  min={0.1}
                  step={0.1}
                  max={2}
                  onChange={handleGapLengthChange}
                />
              </>
            }
          </>
        );
      case 'junction-aisle': case 'arc-aisle':
        return (
          <>
            {aisleType &&
              <InputToggle
                inputKey="Flip Ailse"
                label="Flip Aisle"
                value={aisleIsFlipped}
                onClick={handleIsFlippedChange}
              />
            }
          </>
        );
      default:
        return null;
    }
  };

  return (
    <div className="aisle-properties-container">
      <div className="header">Properties</div>

      {/* Basic Properties */}
      <section>
        {aisleType !== 'dotted-aisle' &&
          <InputWithDropDown
            label="Aisle Width"
            value={`${aisleWidthValue}`}
            min={0.1}
            step={0.1}
            max={2}
            onChange={handleAisleWidthChange}
          />
        }
        {renderAdvancedProperties()}
      </section>

      {/* Presets */}
      <section>
        <button
          className="header"
          onClick={() => setCollapsePresets(!collapsePresets)}
          aria-expanded={!collapsePresets}
        >
          <div className="value">Presets</div>
          <div className="icon">
            <ArrowIcon />
          </div>
        </button>
        {!collapsePresets && (
          <div className="presets-list-container">
            {aisleTypes.map((val) => (
              <div className="preset-list" key={val.id}>
                <button
                  className={`thumbnail ${aisleType === val.type ? "selected" : ""}`}
                  title={val.name}
                  onClick={() => setAisleType(val.type)}
                >
                  <img src={val.thumbnail} alt="" />
                </button>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Texture */}
      <section>
        <button
          className="header"
          onClick={() => setCollapseTexture(!collapseTexture)}
          aria-expanded={!collapseTexture}
        >
          <div className="value">Aisle Texture</div>
          <div className="icon" style={{ rotate: collapseTexture ? "" : "-90deg" }}>
            <ArrowIcon />
          </div>
        </button>

        {collapseTexture && (
          <div className="aisle-texture-container">
            {aisleTextureList.map((val) => (
              <button
                key={val.id}
                title={val.brief || val.id}
                className={`aisle-list ${aisleColor === val.color ? "selected" : ""}`}
                onClick={() => setAisleColor(val.id)}
                aria-pressed={aisleColor === val.id}
              >
                <div 
                  className={`texture-display ${val.id}`}
                  style={{ background: val.id }}
                >
                  {val.texture}
                </div>
                <div className="aisle-color">{val.color}</div>
                <div className="aisle-brief">{`( ${val.brief} )`}</div>
              </button>
            ))}
          </div>
        )}
      </section>
    </div>
  );
};

export default AisleProperties;