import { Divider } from "@mui/material";
import { useSharedState } from "../../store/useSharedState";
import GenericBox from "../../ui/GenericBox";
import GenericRadioGroup from "../../ui/GenericRadioGroup";
import InputField from "../../ui/InputField";
import { URL_RADIO_DATA } from "./../../constants/photo";
import { useState } from "react";

function PhotoUrl() {
  const previewMode = useSharedState((state) => state.previewMode);
  const setPreviewMode = useSharedState((state) => state.setPreviewMode);

  const [urlPoint, setUrlPoint] = useState("single");

  const url = useSharedState((state) => state.urls[previewMode]);
  const setUrl = useSharedState((state) => state.setUrl);

  const photoAlt = useSharedState((state) => state.photoAlt);
  const setPhotoAlt = useSharedState((state) => state.setPhotoAlt);

  const handleUrlRadioChange = (event) => {
    setUrlPoint(event.target.value);
    setPreviewMode(event.target.value === "rwd" ? "desktop" : "single");
  };
  const handleChangeURL = ({ event, type }) => {
    event.preventDefault();
    setUrl(type, event.target.value);
  };

  return (
    <GenericBox variant="inner" title="Zdjęcie">
      <GenericRadioGroup
        radioData={URL_RADIO_DATA}
        value={urlPoint}
        onChange={handleUrlRadioChange}
        direction="row"
      />
      <InputField
        name={`URL zdjęcia ${
          previewMode === "single" ? "" : `na ${previewMode}`
        }`}
        onChange={(e) => handleChangeURL({ event: e, type: previewMode })}
        value={url}
      />
      <Divider />
      <InputField
        name="Alt zdjęcia"
        onChange={(e) => setPhotoAlt(e.target.value)}
        value={photoAlt}
      />
    </GenericBox>
  );
}

export default PhotoUrl;