import { useCallback, useEffect, useState } from 'react';
import { Auction, Project } from 'gql-client';

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
} from '@mui/material';

import {
  CheckRoundFilledIcon,
  LoadingIcon,
} from 'components/shared/CustomIcon';
import { useGQLClient } from 'context/GQLClientContext';
import { Button, Heading, Tag } from 'components/shared';

const WAIT_DURATION = 5000;

export const AuctionCard = ({ project }: { project: Project }) => {
  const [auctionStatus, setAuctionStatus] = useState<string>('');
  const [deployerLrns, setDeployerLrns] = useState<string[]>([]);
  const [fundsStatus, setFundsStatus] = useState<boolean>(false);
  const [auctionDetails, setAuctionDetails] = useState<Auction | null>(null);
  const [openDialog, setOpenDialog] = useState<boolean>(false);
  const client = useGQLClient();

  const getIconByAuctionStatus = (status: string) =>
    status === 'completed' ? (
      <CheckRoundFilledIcon />
    ) : (
      <LoadingIcon className="animate-spin" />
    );

  const checkAuctionStatus = useCallback(async () => {
    const result = await client.getAuctionData(project.auctionId);
    setAuctionStatus(result.status);
    setAuctionDetails(result);
    setDeployerLrns(project.deployerLrns);
    setFundsStatus(project.fundsReleased);
  }, []);

  useEffect(() => {
    if (auctionStatus !== 'completed') {
      checkAuctionStatus();
      const intervalId = setInterval(checkAuctionStatus, WAIT_DURATION);
      return () => clearInterval(intervalId);
    }

    if (auctionStatus === 'completed') {
      const fetchUpdatedProject = async () => {
        // Wait for 5 secs since the project is not immediately updated with deployer LRNs
        await new Promise((resolve) => setTimeout(resolve, WAIT_DURATION));
        const updatedProject = await client.getProject(project.id);
        setDeployerLrns(updatedProject.project?.deployerLrns || []);
      };
      fetchUpdatedProject();
    }
  }, [auctionStatus, client]);

  const renderAuctionStatus = useCallback(
    () => (
      <Tag
        leftIcon={getIconByAuctionStatus(auctionStatus)}
        size="xs"
        type={auctionStatus === 'completed' ? 'positive' : 'emphasized'}
      >
        {auctionStatus.toUpperCase()}
      </Tag>
    ),
    [auctionStatus],
  );

  const handleOpenDialog = () => setOpenDialog(true);
  const handleCloseDialog = () => setOpenDialog(false);

  return (
    <>
      <div className="p-3 gap-2 rounded-xl border border-gray-200 transition-colors hover:bg-base-bg-alternate flex flex-col mt-8">
        <div className="flex justify-between items-center">
          <Heading className="text-lg leading-6 font-medium">
            Auction details
          </Heading>
          <Button onClick={handleOpenDialog} variant="tertiary" size="sm">
            View details
          </Button>
        </div>

        <div className="flex justify-between items-center mt-1">
          <span className="text-elements-high-em text-sm font-medium tracking-tight">
            Auction Status
          </span>
          <div className="ml-2">{renderAuctionStatus()}</div>
        </div>

        <div className="flex justify-between items-center mt-2">
          <span className="text-elements-high-em text-sm font-medium tracking-tight">
            Auction Id
          </span>
          <span className="text-elements-mid-em text-sm text-right">
            {project.auctionId}
          </span>
        </div>

        {deployerLrns?.length > 0 && (
          <div className="mt-3">
            <span className="text-elements-high-em text-sm font-medium tracking-tight">
              Deployer LRNs
            </span>
            {deployerLrns.map((lrn, index) => (
              <p key={index} className="text-elements-mid-em text-sm">
                {'\u2022'} {lrn}
              </p>
            ))}
          </div>
        )}

        <div className="flex justify-between items-center mt-1">
          <span className="text-elements-high-em text-sm font-medium tracking-tight">
            Deployer Funds Status
          </span>
          <div className="ml-2">
            <Tag size="xs" type={fundsStatus ? 'positive' : 'emphasized'}>
              {fundsStatus ? 'RELEASED' : 'LOCKED'}
            </Tag>
          </div>
        </div>
      </div>

      <Dialog
        open={openDialog}
        onClose={handleCloseDialog}
        fullWidth
        maxWidth="md"
      >
        <DialogTitle>Auction Details</DialogTitle>
        <DialogContent>
          {auctionDetails && (
            <pre>{JSON.stringify(auctionDetails, null, 2)}</pre>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseDialog}>Close</Button>
        </DialogActions>
      </Dialog>
    </>
  );
};