import { Flex, Card, Alert, Button } from 'antd'
import AuthParticles from './AppParticles'
import FarmControlLogo from '../Logos/FarmControlLogo'
import ExclamationOctagonIcon from '../Icons/ExclamationOctagonIcon'
import PropTypes from 'prop-types'
import ArrowLeftIcon from '../Icons/ArrowLeftIcon'
import ReloadIcon from '../Icons/ReloadIcon'
import { useNavigate } from 'react-router-dom'
import VendorIcon from '../Icons/VendorIcon'

const AppError = ({
  message = 'Error Message',
  showBack = true,
  showRefresh = true,
  showHome = true
}) => {
  const navigate = useNavigate()
  const handleBack = () => {
    window.history.back()
  }

  const handleRefresh = () => {
    window.location.reload()
  }

  const handleHome = () => {
    navigate('/production/overview')
  }

  return (
    <>
      <AuthParticles />
      <Flex
        align='center'
        justify='center'
        vertical
        style={{ height: '100vh' }}
        gap={'large'}
      >
        <Card style={{ borderRadius: 20 }}>
          <Flex vertical align='center'>
            <FarmControlLogo style={{ fontSize: '500px', height: '40px' }} />
          </Flex>
        </Card>
        <Alert
          message={message}
          icon={<ExclamationOctagonIcon />}
          type={'error'}
          showIcon
        />
        {(showBack || showRefresh || showHome) && (
          <Flex gap='middle'>
            {showBack && (
              <Button
                icon={<ArrowLeftIcon />}
                onClick={handleBack}
                size='large'
              />
            )}
            {showRefresh && (
              <Button
                icon={<ReloadIcon />}
                onClick={handleRefresh}
                size='large'
              />
            )}
            {showHome && (
              <Button icon={<VendorIcon />} onClick={handleHome} size='large' />
            )}
          </Flex>
        )}
      </Flex>
    </>
  )
}

AppError.propTypes = {
  message: PropTypes.string,
  showBack: PropTypes.bool,
  showRefresh: PropTypes.bool,
  showHome: PropTypes.bool
}

export default AppError
