import React, { useState, useEffect, useContext } from 'react'
import axios from 'axios'
import {
  Grid,
  CircularProgress,
  Card,
  CardHeader,
  Divider,
  CardContent,
  TextField,
  CardActions,
  Button,
  FormGroup,
  FormControlLabel,
  Checkbox
} from '@mui/material'
import { toast } from 'react-toastify'

import { AppContext, ModeType } from '../../context/appContext'

const Profile = () => {
  const [isLoading, setIsLoading] = useState(false)
  const appContext = useContext(AppContext)
  const [user, setUser] = useState({} as any)

  useEffect(() => {
    setIsLoading(true)
    axios
      .get(`/SASjsApi/user/${appContext.userId}`)
      .then((res: any) => {
        setUser(res.data)
      })
      .catch((err) => {
        console.log(err)
      })
      .finally(() => {
        setIsLoading(false)
      })
  }, [])

  const handleChange = (event: any) => {
    const { name, value } = event.target

    setUser({ ...user, [name]: value })
  }
  const handleSubmit = () => {
    setIsLoading(true)
    axios
      .patch(`/SASjsApi/user/${appContext.userId}`, {
        username: user.username,
        displayName: user.displayName,
        autoExec: user.autoExec
      })
      .then((res: any) => {
        toast.success('User information updated', {
          theme: 'dark',
          position: toast.POSITION.BOTTOM_RIGHT
        })
      })
      .catch((err) => {
        toast.error('Failed: ' + err.response?.data || err.text, {
          theme: 'dark',
          position: toast.POSITION.BOTTOM_RIGHT
        })
      })
      .finally(() => {
        setIsLoading(false)
      })
  }

  return isLoading ? (
    <CircularProgress
      style={{ position: 'absolute', left: '50%', top: '50%' }}
    />
  ) : (
    <Card>
      <CardHeader title="Profile Information" />
      <Divider />
      <CardContent>
        <Grid container spacing={4}>
          <Grid item md={6} xs={12}>
            <TextField
              fullWidth
              error={user.displayName?.length === 0}
              helperText="Please specify display name"
              label="Display Name"
              name="displayName"
              onChange={handleChange}
              required
              value={user.displayName}
              variant="outlined"
              disabled={appContext.mode === ModeType.Desktop}
            />
          </Grid>

          <Grid item md={6} xs={12}>
            <TextField
              fullWidth
              error={user.username?.length === 0}
              helperText="Please specify username"
              label="Username"
              name="username"
              onChange={handleChange}
              required
              value={user.username}
              variant="outlined"
              disabled={appContext.mode === ModeType.Desktop}
            />
          </Grid>

          <Grid item lg={6} md={8} sm={12} xs={12}>
            <TextField
              fullWidth
              label="autoExec"
              name="autoExec"
              onChange={handleChange}
              multiline
              rows="10"
              value={user.autoExec}
              variant="outlined"
            />
          </Grid>

          <Grid item xs={6}>
            <FormGroup row>
              <FormControlLabel
                disabled
                control={<Checkbox checked={user.isActive} />}
                label="isActive"
              />
              <FormControlLabel
                disabled
                control={<Checkbox checked={user.isAdmin} />}
                label="isAdmin"
              />
            </FormGroup>
          </Grid>
        </Grid>
      </CardContent>
      <Divider />
      <CardActions>
        <Button type="submit" variant="contained" onClick={handleSubmit}>
          Save Changes
        </Button>
      </CardActions>
    </Card>
  )
}

export default Profile
