import * as RadixDialog from '@radix-ui/react-dialog'
import { Cross2Icon } from '@radix-ui/react-icons'
import React, { type ReactElement } from 'react'

interface IDialogProps {
  open: boolean
  onClickTrigger: React.MouseEventHandler<HTMLButtonElement> | undefined
  onEscapeKeyDown: ((event: KeyboardEvent) => void) | undefined
  onClickClose: React.MouseEventHandler<SVGElement> | undefined
  trigger: ReactElement
  triggerWrapperClassName?: string
  title: string
  body: ReactElement
}

const MobileDialog = (props: IDialogProps): ReactElement => {
  const {
    open,
    onClickTrigger,
    onEscapeKeyDown,
    onClickClose,
    trigger,
    triggerWrapperClassName,
    body,
    title
  } = props
  return (
    <RadixDialog.Root open={open}>
      <RadixDialog.Trigger onClick={onClickTrigger} className={triggerWrapperClassName} >
        {trigger}
      </RadixDialog.Trigger>
      <RadixDialog.Portal>
        <RadixDialog.Overlay className='z-30 fixed top-0 right-0 bottom-0 left-0 bg-slate-200 max-h-full'>
          <RadixDialog.Content
            className='flex flex-col divide-y divide-slate-300 h-full max-h-full'
            onEscapeKeyDown={onEscapeKeyDown}
          >
            <div className='text-sm font-semibold uppercase text-slate-500 flex pr-4 py-4'>
              <div className='w-full text-center pl-6 self-center'>{title}</div>
              <Cross2Icon
                className='self-center w-6 h-6 hover:cursor-pointer'
                onClick={onClickClose}
              />
            </div>
            {body}
          </RadixDialog.Content>
        </RadixDialog.Overlay>
      </RadixDialog.Portal>
    </RadixDialog.Root>
  )
}

export default MobileDialog
