import { Alert, Box, Button, styled, Typography } from '@mui/material'
import { useNavigate } from 'react-router-dom'
import {
  internalserver,
  nointernet,
  pagenotfound,
  permissiondenied,
  unauth,
} from '../../assets/images'
import { openRootModal } from '../../contexts/RootModal'

const StyledAlert = styled(Alert)(({ theme }) => ({
  height: '60px',
  border: `1px solid ${theme.palette.error.main}`,
  display: 'flex',
  alignItems: 'center',
  '& .MuiAlert-message': {
    padding: 0,
  },
  '& .MuiTypography-root': {
    margin: 0,
  },
  position: 'relative',
  '& .retryBtn': {
    color: '#661B2A',
    position: 'absolute',
    right: 8,
    top: 8,
  },
}))
const StyledBox = styled(Box)(({ theme }) => ({
  width: '100%',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
}))
export default function ErrorFallback({ error, resetErrorBoundary }) {
  if (error?.response?.status) {
    switch (error?.response?.status) {
      case 401:
        return <UnAuth resetBoundary={resetErrorBoundary} />
      case 500:
        return (
          <InternalServer resetBoundary={resetErrorBoundary} error={error} />
        )
      case 403:
        return <PemissionDenied resetBoundary={resetErrorBoundary} />
      default:
        return (
          <InternalServer resetBoundary={resetErrorBoundary} error={error} />
        )
    }
  }
  if (error?.message === 'Network Error') {
    return <NoInternet resetBoundary={resetErrorBoundary} />
  }
  return (
    <Box sx={{ marginTop: '16px', padding: '20px' }}>
      <StyledAlert severity="error">
        {error?.response?.data?.message ?? error?.message}
        <Button
          className="retryBtn"
          onClick={() => resetErrorBoundary()}
          size="small"
          color="error"
          variant="outlined"
        >
          Try Again
        </Button>
      </StyledAlert>
    </Box>
  )
}
export function PageNotFound({ resetBoundary }) {
  return (
    <>
      <StyledBox>
        <img
          src={pagenotfound}
          alt="page not found"
          width={470}
          style={{ marginTop: '20px' }}
        />
        <Typography variant="h1">Page Not Found.</Typography>
        <Button sx={{ marginTop: '20px' }} onClick={() => resetBoundary()}>
          Try Again
        </Button>
      </StyledBox>
    </>
  )
}
export function NoInternet({ resetBoundary }) {
  return (
    <>
      <StyledBox>
        <img src={nointernet} alt="No Internet Found" width={470} />
        <Typography variant="h1">No Internet Found.</Typography>
        <Button sx={{ marginTop: '20px' }} onClick={() => resetBoundary()}>
          Try Again
        </Button>
      </StyledBox>
    </>
  )
}
export function PemissionDenied({ resetBoundary }) {
  return (
    <>
      <StyledBox>
        <img src={permissiondenied} alt="permission denied" width={470} />
        <Typography variant="h1">Permission Denied.</Typography>
        <Button sx={{ marginTop: '20px' }} onClick={() => resetBoundary()}>
          Try Again
        </Button>
      </StyledBox>
    </>
  )
}
export function InternalServer({ resetBoundary, error }) {
  return (
    <>
      <StyledBox>
        <img src={internalserver} alt="internal server error" width={470} />
        <Typography variant="h1" marginTop={'20px'}>
          Internal Server Error.
        </Typography>
        <Typography variant="body1">
          {error?.response?.data?.message
            ? typeof error?.response?.data?.message === 'string'
              ? error?.response?.data?.message
              : JSON.stringify(error?.response?.data?.message)
            : 'Internal Server Error'}
        </Typography>
        <Button
          size="small"
          variant="outlined"
          sx={{ marginTop: '20px' }}
          onClick={() => resetBoundary()}
        >
          Try Again
        </Button>
      </StyledBox>
    </>
  )
}
export function UnAuth({ resetBoundary }) {
  const navigate = useNavigate()

  const isDevelopment = process.env.NODE_ENV === 'development'

  function handleLoginClick() {
    if (isDevelopment) {
      openRootModal({
        key: 'login',
      })
    } else {
      navigate('/auth/login')
    }
  }
  return (
    <>
      <StyledBox>
        <img src={unauth} alt="unauthorized" width={470} />
        <Typography variant="h1" marginTop={'20px'}>
          UnAuthorized.
        </Typography>
        <Box
          sx={{
            display: 'flex',
            marginTop: '20px',
          }}
        >
          <Button
            variant="outlined"
            sx={{ marginRight: '10px' }}
            onClick={() => resetBoundary()}
          >
            Try Again
          </Button>
          <Button onClick={handleLoginClick}>Click here to Login</Button>
        </Box>
      </StyledBox>
    </>
  )
}
