import { useDialogue } from '@/lib/dialogues/useDialogue'
import { Button } from '@/components/ui/button'
import { Dialog,
	 DialogContent,
	 DialogDescription,
	 DialogFooter,
	 DialogHeader,
	 DialogTitle } from '@/components/ui/dialog'
import { toast } from '@/components/ui/use-toast'
import { apiPost } from '@/lib/api'
import { useUITranslation } from '@/lib/useUITranslation'
import { rememberUserCode } from '@/lib/users'

import type { FC } from 'react'

import type { User } from '@/types'

type Props = { visible:         boolean
	       onVisibleChange: (visible: boolean) => void
	       user:            User | null
	       setUser:         React.Dispatch<React.SetStateAction<User | null>> }


const UserCodeDialogue: FC<Props> = ({ visible, onVisibleChange, user, setUser }) => {
  const dialogue = useDialogue ()
  const { label } = useUITranslation ('settings')

  const handleChange = async () => {
    if (!(user))
      return

    if (!(await dialogue.confirm ({
	title: label ('userCode.confirm'),
	description: (
	    <div>
	      <p>{label ('userCode.logoutWarning')}</p>
	    </div>),
	confirmText: label ('userCode.confirmRenew'),
	cancelText: label ('actions.cancel'),
	closeLabel: label ('actions.close'),
	variant: 'danger' })))
      return

    const data = await apiPost<{ code: string }> ('/users/code/renew', { },
	{ headers: { 'Content-Type': 'multipart/form-data' } })
    if (data.code)
      {
	rememberUserCode (data.code)
	setUser (user => ({ ...user, inheritanceCode: data.code } as User))
	toast ({ title: label ('userCode.renewed') })
      }
  }

  return (
      <Dialog open={visible} onOpenChange={onVisibleChange}>
	<DialogContent className="px-6 pb-6 pt-7" closeLabel={label ('actions.close')}>
	  <DialogHeader className="pl-8">
	    <DialogTitle>{label ('userCode.title')}</DialogTitle>

	    <DialogDescription asChild>
	      <div>
		<p>{label ('userCode.description')}</p>
		<div className="m-2">{user?.inheritanceCode}</div>
		<p className="mt-1 text-sm text-destructive">
		  {label ('userCode.secretWarning')}
		</p>
	      </div>
	    </DialogDescription>
	  </DialogHeader>

	  <DialogFooter>
	    <Button onClick={handleChange} variant="destructive">
	      {label ('userCode.renew')}
	    </Button>
	  </DialogFooter>
	</DialogContent>
      </Dialog>)
}

export default UserCodeDialogue