import { Button } from '@/components/ui/button'
import { Dialog,
	 DialogContent,
	 DialogTitle } from '@/components/ui/dialog'
import { toast } from '@/components/ui/use-toast'
import { apiPost } from '@/lib/api'

import type { User } from '@/types'

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


export default ({ visible, onVisibleChange, user, setUser }: Props) => {
  const handleChange = async () => {
    if (!(user))
      return

    if (!(confirm ('引継ぎコードを再発行しますか?\n再発行するとほかのブラウザからはログアウトされます．')))
      return

    const data = await apiPost<{ code: string }> ('/users/code/renew', { },
	{ headers: { 'Content-Type': 'multipart/form-data' } })
    if (data.code)
      {
	localStorage.setItem ('user_code', data.code)
	setUser (user => ({ ...user, inheritanceCode: data.code } as User))
	toast ({ title: '再発行しました．' })
      }
  }

  return (
      <Dialog open={visible} onOpenChange={onVisibleChange}>
	<DialogContent>
	  <DialogTitle>引継ぎコード</DialogTitle>
	  <div>
	    <p>あなたの引継ぎコードはこちらです：</p>
	    <div className="m-2">{user?.inheritanceCode}</div>
	    <p className="mt-1 text-sm text-red-500">
	      このコードはほかの人には教えないでください!
	    </p>
	    <div className="my-4">
	      <Button onClick={handleChange}
		      className="px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400">
		引継ぎコード再発行
	      </Button>
	    </div>
	  </div>
	</DialogContent>
      </Dialog>)
}