import {
    Button,
    Icon,
    Grid,
    Radio,
    RadioGroup,
    FormControlLabel,
    Checkbox,
    Box,
    Divider,
    Typography,
    Slide,
    CircularProgress,
    Dialog,
    DialogTitle,
} from '@mui/material'
import { styled } from '@mui/system'
import { Span } from 'app/components/Typography'
import React, { useState, useEffect } from 'react'
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator'
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import LocalizationProvider from '@mui/lab/LocalizationProvider'
import { DatePicker } from '@mui/lab'
import { useNavigate, useParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import { MatxLoading } from 'app/components'
import FAQSService from 'app/services/allThingsLocals/FAQSService'

const TextField = styled(TextValidator)(() => ({
    width: '100%',
    marginBottom: '16px',
}))

const Form = () => {
    const navigate = useNavigate()
    const { id } = useParams()
    const [isLoading, setIsLoading] = useState(false)
    const [state, setState] = useState({})
    const [error, setError] = React.useState('')
    const [open, setOpen] = React.useState(false)
    const [selectedImage, setSelectedImage] = React.useState(null)

    const handleClickOpen = () => {
        setOpen(true)
    }

    const handleClose = () => {
        setOpen(false)
    }

    React.useEffect(() => {
        if (id) {
            FAQSService.getSingle(id).then((res) => {
                setState({
                    question: res.question,
                    answer: res.answer,
                })
            })
        }
    }, [])
    const handleSubmit = async (event) => {
        console.log('STATE: ', state)
        setIsLoading(true)
        setError('')

        try {
            if (id) {
                FAQSService.editFAQ(id, {
                    question,
                    answer,
                })
                    .then((record) => {
                        console.log('record: ', record)
                        toast.success('Data Saved')
                        navigate('/admin/faqs/all')
                    })
                    .catch((err) => {
                        console.log('ERR : ', err)
                        toast.error('Something bad happened')
                    })
            } else {
                FAQSService.addFAQ({
                    question,
                    answer,
                })
                    .then((record) => {
                        console.log('record: ', record)
                        toast.success('Data Saved')
                        navigate('/admin/faqs/all')
                    })
                    .catch((err) => {
                        console.log('ERR : ', err)
                        toast.error('Something bad happened')
                    })
            }
        } catch (err) {
            console.log('ERR : ', err)
            toast.error('Something bad happened')
        }
    }

    const handleChange = (event) => {
        event.persist()
        setState({
            ...state,
            [event.target.name]: event.target.value,
        })
    }

    const { question, answer } = state

    if (isLoading) {
        return <MatxLoading />
    }

    return (
        <>
            <div>
                <Typography
                    className="mb-4 center"
                    style={{ color: '#e30505' }}
                >
                    {error}
                </Typography>
                <ValidatorForm onSubmit={handleSubmit} onError={() => null}>
                    <Grid container spacing={2}>
                        <Grid item lg={6} md={6} sm={12} xs={12}>
                            <TextField
                                label="Question"
                                onChange={handleChange}
                                type="text"
                                name="question"
                                id="question"
                                variant="outlined"
                                value={question || ''}
                                validators={['required']}
                                errorMessages={['this field is required']}
                            />
                        </Grid>
                        <Grid item lg={6} md={6} sm={12} xs={12}>
                            <TextField
                                label="Answer"
                                onChange={handleChange}
                                type="text"
                                variant="outlined"
                                name="answer"
                                value={answer || ''}
                                validators={['required']}
                                errorMessages={['this field is required']}
                            />
                        </Grid>
                    </Grid>

                    <Box mt={3}>
                        <Button
                            color="primary"
                            variant="contained"
                            type="submit"
                        >
                            <Icon>send</Icon>
                            <span className="pl-2 capitalize">Submit</span>
                        </Button>
                    </Box>
                </ValidatorForm>
            </div>
        </>
    )
}

export default Form
