import React, {useState} from "react";
import axios from "axios";
import DateFnsUtils from '@date-io/date-fns';
import {nb} from 'date-fns/locale'
import {DateTimePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
import {makeStyles} from '@material-ui/core/styles';
import ReCAPTCHA from "react-google-recaptcha";
import {
Button,
ButtonGroup,
Container,
Checkbox,
CssBaseline,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
FormControl,
FormControlLabel,
FormGroup,
Grid,
IconButton,
Paper,
TextField,
Typography,
} from '@material-ui/core';
import {
Add,
Remove,
} from '@material-ui/icons'
const useStyles = makeStyles((theme) => ({
fieldset: {
//border: 'none',
marginBottom: theme.spacing(3),
paddingBottom: theme.spacing(3),
},
form: {
width: '100%',
marginTop: theme.spacing(1),
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
}
}));
const SubmitButton = (props) => {
const [isApproved, setIsApproved] = useState(false);
const recaptchaRef = React.createRef();
const onChange = (value) => {
console.log("Captcha value:", value);
setIsApproved(true);
}
return (
isApproved ? setIsApproved(false) : false}
ref={recaptchaRef}
sitekey={"6LfRxgAVAAAAALlMOyD5h_a6gvWulxGqCC5gKJvd"}
size={"invisible"}
/>
);
}
const RegForm = (props) => {
const classes = useStyles();
const [inputs, updateInputs] = useState({
dates: [{date: new Date(), duration: 0}],
});
const inputHandler = (event) => {
const target = event.target
updateInputs((prevState) => ({...prevState, [target.id]: target.value}));
};
const inputCategoryHandler = (type, event, category) => {
const keys = Object.keys(inputs).filter(idx => idx == type);
let arr = keys.length == 0 ? [] : inputs[keys[0]];
if (event.target.checked)
arr.push(category);
else
arr = arr.filter(item => item.id != category.id);
updateInputs((prevState) => ({...prevState, [type]: arr}));
}
const dateAddHandler = (idx) => {
inputs.dates.splice(idx, 0, {...inputs.dates[idx]});
updateInputs((prevState) => ({...prevState, dates: inputs.dates}));
}
const dateRemoveHandler = (idx) => {
if (inputs.dates.length == 1)
return;
if (!inputs.dates[idx])
return;
updateInputs(prevState => ({...prevState, dates: [...inputs.dates.slice(0, idx), ...inputs.dates.slice(idx+1)]}));
}
const dateSaveHandler = (idx, e) => {
if (!inputs.dates[idx])
return;
inputs.dates[idx].date = e;
updateInputs((prevState) => ({...prevState, dates: inputs.dates}));
}
const dateDurationSaveHandler = (idx, e) => {
if (!inputs.dates[idx])
return;
const target = e.target;
inputs.dates[idx].duration = parseInt(target.value, 10);
updateInputs((prevState) => ({...prevState, dates: inputs.dates}));
}
const submitHandler = (event) => {
event.PreventDefault();
console.log(event);
}
return (
)
}
const CategorySelection = (props) => {
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [availableItems, setAvailableItems] = useState([]);
React.useEffect(() => {
axios.get("https://magy.giaever.online/tff/api/webflow_items?cid=" + props.cid)
.then((response) => {
const data = response.data['hydra:member'];
setAvailableItems(response.data['hydra:member']);
})
.catch((error) => {
setError(error);
})
.then(() => {
setIsLoading(false);
});
}, []);
return (
{isLoading ?
Laster...
:
{availableItems.map(item => sitem.id == item.id).length > 0}
value={item.id}
onChange={() => props.inputCategoryHandler(props.name, event, item)}
/>
}
label={item.name}
/>
)}
}
{props.selected.map(item => - {item.name}
)}
)
}
const DialogCancelOk = (props) => {
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClickClose = () => {
setOpen(false);
};
return (
)
}
export default RegForm;