import { Box, Stack, Typography, styled } from '@mui/material'
import { useNavigate } from 'react-router-dom'
import LabelValue from './LabelValue'

const FeeCard = ({
  title = null,
  amount,
  path = null,
  yearRestricted = false,
  cardHeight = '170px',
  payButtonHeight = '50px',
  isCardDue = false,
  paymentPath = null,
  image = null,
  labelValue = 'Total due amount',
  viewCard = false,
}) => {
  const navigate = useNavigate()

  const handleInformation = (path) => {
    navigate(`${path}`)
  }

  const handleClick = (due) => {
    if (!due) return

    navigate(`${paymentPath}`)
  }

  return (
    <StyledYearCard isCardDue={isCardDue} height={cardHeight}>
      <Box style={{ padding: '20px', width: '100%' }}>
        {title && (
          <Stack
            alignItems={'center'}
            direction={'row'}
            justifyContent={'space-between'}
            sx={{
              paddingBottom: '18px',
            }}
          >
            <Typography
              variant="subtitle1"
              sx={{ color: 'white', fontWeight: '600' }}
            >
              {title}
            </Typography>
            <img
              style={{ height: '20px', width: '20px', cursor: 'pointer' }}
              src={image}
              onClick={() => handleInformation(path)}
            />
          </Stack>
        )}

        <LabelValue
          reverse
          value={labelValue}
          label={`${
            amount > 0
              ? `${amount.toLocaleString('en-IN', {
                  style: 'currency',
                  currency: 'INR',
                })}`
              : 'NA'
          }`}
          labelsx={{
            fontSize: '14px',
            color: 'white',
            fontWeight: '600',
          }}
          valuesx={{
            fontSize: '12px',
            color: 'white',
            fontWeight: '400',
          }}
          sx={{ gap: '4px' }}
        />
      </Box>
      <StyledPayContainer
        disabled={yearRestricted}
        height={payButtonHeight}
        onClick={() => handleClick(amount)}
      >
        <Typography
          variant="subtitle1"
          sx={{
            color: 'white',
            opacity: !yearRestricted ? 1 : 0.7,
            fontWeight: '600',
            padding: '12px',
            cursor: !yearRestricted ? 'pointer' : 'initial',
          }}
        >
          {!viewCard ? 'Pay' : 'View'}
        </Typography>
      </StyledPayContainer>
    </StyledYearCard>
  )
}
export default FeeCard

const StyledYearCard = styled(Box, {
  shouldForwardProp: (prop) => prop !== 'disabled',
})<{ isCardDue: boolean; height: string }>(({ theme, isCardDue, height }) => ({
  display: 'flex',
  flexDirection: 'column',
  height: height ?? '170px',
  alignItems: 'flex-start',
  justifyContent: 'space-between',
  backgroundImage: isCardDue
    ? 'linear-gradient(102deg, #C02633 0%, #A23B39 100%)'
    : 'linear-gradient(102deg, #0093E9 0%, #0841AC 100%)',
  borderRadius: '10px',
  transition: 'background 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
  boxShadow: '0px 2px 10px #0000000F',
  '& .MuiTypography-subtitle2': {
    color: 'white',
    opacity: 0.9,
  },
}))

const StyledPayContainer = styled(Box, {
  shouldForwardProp: (prop) => prop !== 'disabled',
})<{ disabled: boolean; height: string }>(({ theme, disabled, height }) => ({
  width: '100%',
  height: height,
  backgroundColor: disabled ? '#333333' : '#121212',
  borderRadius: '0px 0px 10px 10px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
}))
