import { Close } from '@mui/icons-material'
import {
  Box,
  Dialog,
  DialogProps,
  DialogTitle,
  Grow,
  IconButton,
  styled,
} from '@mui/material'
import { TransitionProps } from '@mui/material/transitions'
import { forwardRef, useState } from 'react'
import { SCROLLBAR_DARK } from '../../theme/muiTheme'
import ActionButton from '../ActionButton'
import ErrorBoundary from '../ErrorBoundary/ErrorBoundary'
import Report from './Report'

const StyledDialogHeader = styled(Box)(() => ({
  height: '64px',
  backgroundColor: '#f7f7f7',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'end',
  padding: '0.6rem 1rem',
  paddingBottom: '10px',
}))

const StyledDialogContent = styled(Box)(() => ({
  width: '100%',
  padding: '1rem',
  maxHeight: 'calc(100vh - 64px)',
  overflow: 'auto',
  ...SCROLLBAR_DARK,
}))

export const Transition = forwardRef(function Transition(
  props: TransitionProps & {
    children: React.ReactElement
  },
  ref: React.Ref<unknown>,
) {
  return <Grow timeout={1000} ref={ref} {...props} />
})

interface ButtonProps {
  title: string
  dialogProps?: Omit<DialogProps, 'open'>
  onDialogClose?: () => void
  header: string[]
  onSubmit: (data: any) => void
  changeHeader: string[]
  btnTitle?: string
}

export default function CustomizeReport({
  title,
  dialogProps,
  onDialogClose,

  header,
  onSubmit,
  changeHeader,
  btnTitle,
}: ButtonProps) {
  const [open, setOpen] = useState(false)

  const onClose = () => {
    onDialogClose && onDialogClose()
    setOpen(false)
  }

  const onOpen = () => {
    setOpen(true)
  }

  return (
    <>
      <ActionButton onClick={onOpen} sx={{ marginRight: '10px' }}>
        {btnTitle || 'Customize Header'}
      </ActionButton>

      <CustomDialog
        open={open}
        dialogProps={dialogProps}
        onClose={onClose}
        title={title}
        header={header}
        onSubmit={onSubmit}
        changeHeader={changeHeader}
      />
    </>
  )
}

interface CustomDialogProps {
  title?: string
  onClose: () => void
  open: boolean
  dialogProps?: Omit<DialogProps, 'open'>
  header: string[]
  onSubmit: (data: any) => void
  changeHeader: string[]
}

export const CustomDialog = ({
  onClose,
  dialogProps,
  title,
  header,
  open,
  onSubmit,
  changeHeader,
}: CustomDialogProps) => {
  const props = {
    PaperProps: {
      ...dialogProps?.PaperProps,
      elevation: 2,
      sx: { borderRadius: '10px' },
    },
    fullWidth: true,
    onClose: onClose,
    open: open,
    transitionDuration: 140,
    TransitionComponent: Transition,
    sx: {
      ...dialogProps?.sx,
      '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
    },
    ...dialogProps,
  }

  return (
    <Dialog {...props}>
      {title && (
        <StyledDialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <IconButton onClick={onClose} sx={{ color: 'black' }}>
            <Close />
          </IconButton>
        </StyledDialogHeader>
      )}
      <StyledDialogContent>
        <ErrorBoundary>
          <Report
            close={onClose}
            header={header}
            onSubmit={onSubmit}
            changeHeader={changeHeader}
          />
        </ErrorBoundary>
      </StyledDialogContent>
    </Dialog>
  )
}
