import { useEffect, useState } from "react";
import getFfmpegConfigListRespondExample from "../example-respond/get_ffmpeg_config_list.json"

function FfmpegConfig(props) {
  // props.setSelectedFfmpegConfig
  // props.selectedFfmpegConfig

  const [ffmpegConfigList, setFfmpegConfigList] = useState([]);

  useEffect(() => {
    setFfmpegConfigList(getFfmpegConfigListRespondExample.ffmpeg_config_list);
    props.setSelectedFfmpegConfig(getFfmpegConfigListRespondExample.ffmpeg_config_list[0]);
  }, []);

  return (
    <div className="ffmpeg-config">
      <select
        onChange={(event) => {
          props.setSelectedFfmpegConfig(
            ffmpegConfigList[event.target.selectedIndex]
          );
        }}
      >
        {ffmpegConfigList.map((ffmpegConfig) => (
          <option key={ffmpegConfig.name}>{ffmpegConfig.name}</option>
        ))}
      </select>
      <span>{props.selectedFfmpegConfig.args}</span>
    </div>
  );
}

export default FfmpegConfig;