import InputField from "../../ui/InputField";
import GenericBox from "../../ui/GenericBox";
import { useSharedState } from "../../store/useSharedState";
import PhotoPointPosition from "./PhotoPointPosition";
import PhotoPointCheckbox from "./PhotoPointCheckbox";
import PhotoPointDirection from "./PhotoPointDirection";

function PhotoSinglePoint({ index }) {
  const setSinglePoint = useSharedState((state) => state.setSinglePoint);
  const removeSinglePoint = useSharedState((state) => state.removeSinglePoint);
  const id = useSharedState((state) => state.points[index].id);

  return (
    <GenericBox
      variant="inner"
      title={`${index + 1}`}
      removeFn={() => removeSinglePoint(index)}
    >
      <InputField
        id={`point-${index}-id`}
        type="text"
        name="id produktu"
        value={id}
        onChange={(e) => setSinglePoint(index, { id: e.target.value })}
      />
      <PhotoPointPosition index={index} />
      <PhotoPointDirection index={index} />
      <PhotoPointCheckbox index={index} />
    </GenericBox>
  );
}

export default PhotoSinglePoint;