import {
    Button,
    Checkbox,
    FormControlLabel,
    Grid,
    Icon,
    TextField,
} from '@mui/material'
import { Box, styled } from '@mui/system'
import React, { useState } from 'react'
import { MatxLoading, SimpleCard } from 'app/components'
import { toast } from 'react-toastify'
import { TextValidator } from 'react-material-ui-form-validator'
import { useNavigate, useParams } from 'react-router-dom'
import { css } from '@emotion/react'
import CompanyUserService from 'app/services/istar/CompanyUserService'

const override = css`
    display: block;
    margin: 0 auto;
    border-color: red;
`

const Container = styled('div')(({ theme }) => ({
    margin: '30px',
    [theme.breakpoints.down('sm')]: {
        margin: '16px',
    },
    '& .breadcrumb': {
        marginBottom: '30px',
        [theme.breakpoints.down('sm')]: {
            marginBottom: '16px',
        },
    },
}))

function ChangePassword() {
    const navigate = useNavigate()
    const { id } = useParams()

    const [state, setState] = useState({
        approved: true,
    })
    const [isLoading, setIsLoading] = useState(false)
    const [error, setError] = useState('')
    const [driver, setDriver] = React.useState()

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

    const handleSubmit = () => {
        console.log('state', id, password)
        try {
            setIsLoading(true)

            CompanyUserService.changePassword({ id, password })
                .then((res) => {
                    toast.success('Data Saved')
                    navigate(-1)
                })
                .catch((err) => {
                    console.log('ERR : ', err)
                    toast.error(err?.response?.data?.error)
                    setIsLoading(false)
                })
        } catch (error) {
            setIsLoading(false)
        }
    }

    const handleLoading = (val) => {
        setIsLoading(val)
    }

    const { password } = state

    if (isLoading) {
        return <MatxLoading />
    }

    return (
        <div>
            <Container>
                <SimpleCard>
                    {error && <p style={{ color: 'red' }}>{error}</p>}
                    <Button
                        variant="contained"
                        color="secondary"
                        style={{ marginBottom: '2rem' }}
                        onClick={(e) => {
                            e.preventDefault()
                            navigate(-1)
                        }}
                    >
                        Go Back
                    </Button>

                    <Grid container spacing={2}>
                        <Grid item lg={6} md={6} sm={12} xs={12}>
                            <TextField
                                label="New Password"
                                onChange={handleChange}
                                fullWidth
                                type="text"
                                name="password"
                                id="password"
                                variant="outlined"
                                value={password || ''}
                            />
                        </Grid>
                    </Grid>
                    <Box mt={3}>
                        <Button
                            color="primary"
                            variant="contained"
                            onClick={handleSubmit}
                        >
                            <Icon>send</Icon>
                            <span className="pl-2 capitalize">Submit</span>
                        </Button>
                    </Box>
                </SimpleCard>
            </Container>
        </div>
    )
}

export default ChangePassword
