import "./MapComponent.css";
import { borders, federalCities, regions } from "../../utils/array";
import { Region } from "../Region/Region";
import { FederalCity } from "../FederalCIty/FederalCity";
import { useEffect, useState } from "react";

export const MapComponent = ({
  selectedValue,
  handleSelect,
  open,
  setOpen,
}) => {
  const [select, setSelect] = useState(selectedValue.id);
  const [display, setDisplay] = useState(selectedValue.name);

  useEffect(() => {
    setSelect(selectedValue.id);
    setDisplay(selectedValue.name);
  }, [handleSelect]);

  return (
    <div className="map-container">
      {open && (
        <div className="region-name-block">
          <div className="region-selected">
            {display && (
              <>
                {" "}
                <div className="region-pointer"></div>
                <span className="region-name">{display}</span>
              </>
            )}
          </div>
        </div>
      )}
      <svg
        viewBox="0 0 1064 555"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_2181_13226)">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d={borders.d}
            fill={borders.fill}
          ></path>
          {regions.map((i) => (
            <Region
              handleSelect={handleSelect}
              select={select}
              key={i.id}
              element={i}
              d={i.d}
            ></Region>
          ))}
        </g>
        <defs>
          <clipPath id="clip0_2181_13226">
            <rect width="1063.48" height="554.495" fill="white" />
          </clipPath>
          <circle cx="7" cy="7" r="6.5" id="crc1" />
        </defs>
        {federalCities.map((item) => (<FederalCity select={select} handleSelect={handleSelect}  key={item.id} item={item}></FederalCity>))}
      </svg>
      {open && (
        <div className="button-block">
          <button onClick={() => setOpen(false)} className="button button-back">
            Назад
          </button>
          <button
            onClick={() => setOpen(false)}
            className="button-confirm button"
          >
            Продолжить
          </button>
        </div>
      )}
    </div>
  );
};