import styled from "@emotion/styled";
import { useSharedState } from "../../store/useSharedState";
import InputField from "../../ui/InputField";
import { capitalizeFirstLetter } from "../../utils/capitalizeFirstLetter";

const StyledPointsContainer = styled("div")({
  display: "grid",
  gridTemplateColumns: "100px 1fr 1fr",
  gap: "0.5rem",
  alignItems: "center",
});

function PhotoPointPosition({ index }) {
  const setSinglePointPosition = useSharedState(
    (state) => state.setSinglePointPosition
  );
  const previewMode = useSharedState((state) => state.previewMode);

  const posX = useSharedState(
    (state) => state.points[index].positions[previewMode].x
  );
  const posY = useSharedState(
    (state) => state.points[index].positions[previewMode].y
  );

  const handleChangeNumber = ({
    e,
    brName,
    positionName,
    min = 0,
    max = 100,
  }) => {
    let newValue = Number(e.target.value);

    if (newValue < min) newValue = min;
    if (newValue > max) newValue = max;

    setSinglePointPosition(index, brName, positionName, newValue);
  };

  return (
    <div style={{ display: "flex", gap: "1.5rem", flexDirection: "column" }}>
      <StyledPointsContainer>
        <span>
          {previewMode === "single"
            ? "Położenie"
            : capitalizeFirstLetter(previewMode)}
          :
        </span>
        <InputField
          id={`point-${index}-x`}
          type="number"
          name="lewo-prawo"
          value={posX}
          onChange={(e) =>
            handleChangeNumber({
              e,
              brName: previewMode,
              positionName: "x",
              min: 0,
              max: 100,
            })
          }
        />
        <InputField
          id={`point-${index}-y`}
          type="number"
          name="góra-dół"
          value={posY}
          onChange={(e) =>
            handleChangeNumber({
              e,
              brName: previewMode,
              positionName: "y",
              min: 0,
              max: 100,
            })
          }
        />
      </StyledPointsContainer>
    </div>
  );
}

export default PhotoPointPosition;