import React, { useContext, useEffect, useState } from "react";
import { ConfigContext } from "config-provider";
import { EasyTreeSelect } from "config-types";
import { mergeUrl } from "../../_util";

export default function EasyArea({ value, onChange }) {
  const [options, setOptions] = useState([]);

  const { assetsUrl } = useContext(ConfigContext);

  useEffect(() => {
    if (assetsUrl) {
      const url = mergeUrl(assetsUrl, "/components/area/main.json");
      fetch(url)
        .then((res) => res.json())
        .then((res) => {
          setOptions(res);
        });
    }
  }, [assetsUrl]);

  return <EasyTreeSelect value={value} options={options} onChange={onChange} />;
}