import React, { useState } from "react";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import { useStyles } from "./styles";
import rxDb from "@/utils/database/rxConnect";
import { Collection } from "@/core/menu/collections";
export default function ParentSelect({ rowData, onChange }) {
    const classes = useStyles();
    const [option, setOption] = React.useState(rowData.parent);
    const [data, setData] = useState([]);
    React.useEffect(() => {
        ;
        (async () => {
            const db = await rxDb();
            const query = db[Collection.name]
                .find()
                .where("name")
                .ne(rowData.name)
                .where("parent") // limiting 2 level of the menu
                .eq("")
                .sort({ name: "asc" });
            const data = await query.exec();
            setData(data);
        })();
    }, []);
    const inputLabel = React.useRef(null);
    const [labelWidth, setLabelWidth] = React.useState(0);
    React.useEffect(() => {
        setLabelWidth(inputLabel.current.offsetWidth);
    }, []);
    const handleChange = (event) => {
        setOption(event.target.value);
        onChange(event.target.value);
    };
    return (<FormControl variant="outlined" className={classes.formControl}>
      <InputLabel ref={inputLabel} id="common-simple-select-outlined-label">
        Parent Name
      </InputLabel>
      <Select labelId="common-simple-select-outlined-label" id="common-simple-select-outlined" value={option} onChange={handleChange} labelWidth={labelWidth}>
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        {data.length > 0 &&
        data.map(item => (<MenuItem key={item.name} value={item.name}>
              {item.name}
            </MenuItem>))}
      </Select>
    </FormControl>);
}