import { Box, Grid, Typography } from '@mui/material';
import React, { useState, useEffect } from 'react';
import { useStyles } from './upgradeYourPlanStyles';
import { LoadingButton } from '@mui/lab';
import { ExpandMore } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';

export default function UpgradeYourPlan({ message, show }) {
  const classes = useStyles();
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = useState(show);

  useEffect(() => {
    setIsOpen(show);
  }, [show]);

  const handleExpandClick = () => {
    setIsOpen(!isOpen);
  };

  if (!isOpen || !message) return null;

  return (
    <Box
      className={`${classes.upgradePlanBox} ${
        isOpen ? '' : classes.upgradePlanBoxHidden
      }`}
    >
      <Grid container className={classes.upgradePlanGrid}>
        <Grid item className={classes.textGrid}>
          <Typography className={classes.updatePlanText}>
            Update Your Plan
          </Typography>
          <Typography className={classes.updatePlanSubText}>
            {message}
          </Typography>
        </Grid>
        <Grid item className={classes.buttonGrid}>
          <LoadingButton
            variant="contained"
            className={classes.button}
            onClick={() => navigate('/choose-plan')}
          >
            Update Now
          </LoadingButton>
        </Grid>
        <Grid item className={classes.upgradePlanDownArrowGrid}>
          <ExpandMore
            className={classes.expandArrow}
            onClick={handleExpandClick}
          />
        </Grid>
      </Grid>
    </Box>
  );
}
