import { Button, Stack } from '@mui/material'
import { useForm } from 'react-hook-form'
import { toast } from 'react-toastify'
import { FormTextField } from '..'
import axios, { axiosErrorToast } from '../../config/axios'

export default function ChangePassword({ close }) {
  const { handleSubmit, control } = useForm()

  const onSubmit = async (formData) => {
    try {
      await axios.post('/auth-server/auth/change-password', formData)
      toast.success('Password Changed Successfully')
    } catch (error) {
      axiosErrorToast(error)
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Stack gap={2}>
        <FormTextField
          label="Old Password"
          control={control}
          name="oldPassword"
          required
        />
        <FormTextField
          label="New Password"
          control={control}
          name="newPassword"
          required
        />
        <FormTextField
          label="Confirm Password"
          control={control}
          name="password"
          required
        />
        <Stack>
          <Button variant="outlined" onClick={close}>
            Cancel
          </Button>
          <Button type="submit">Submit</Button>
        </Stack>
      </Stack>
    </form>
  )
}
