import React, { useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Typography, Card, CardContent, Button, Grid } from '@mui/material';
import { AccountContext } from 'contexts/AccountContext';
import SellerDisclosureDialog from './SellerDisclosureDialog';
import { SellerDisclosureData, Property } from '../Documents/SellerDisclosureDisplay';

interface SellerInformationCardProps {
  sellerDisclosureExists: boolean;
  onSendMessage: () => void;
  disclosureData?: SellerDisclosureData;
  property?: Property;
}

const SellerInformationCard: React.FC<SellerInformationCardProps> = ({
  sellerDisclosureExists,
  onSendMessage,
  disclosureData,
  property,
}) => {
  const { account, accountLoading } = useContext(AccountContext);
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => setOpen(false);

  if (accountLoading) {
    return null; // Or a loading indicator
  }

  if (!account) {
    return (
      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            Seller Disclosure & Questions
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
            Create an account to view the seller disclosure document and message the owner with any
            questions.
          </Typography>
          <Button variant="contained" onClick={() => navigate('/signup')}>
            Create Account
          </Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <>
      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            Seller Disclosure & Questions
          </Typography>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Button
                variant="outlined"
                fullWidth
                disabled={!sellerDisclosureExists}
                onClick={handleOpen}
              >
                {sellerDisclosureExists
                  ? 'View Seller Disclosure'
                  : 'Seller Disclosure Not Available'}
              </Button>
            </Grid>
            <Grid item xs={12}>
              <Button variant="contained" fullWidth onClick={onSendMessage}>
                Ask a Question
              </Button>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
      {disclosureData && property && (
        <SellerDisclosureDialog
          open={open}
          onClose={handleClose}
          disclosureData={disclosureData}
          property={property}
        />
      )}
    </>
  );
};

export default SellerInformationCard;
