import { useEffect, useState } from 'react';
import syncedImg from '../assets/syncStatus/synced.png';
import syncedMintingImg from '../assets/syncStatus/synced_minting.png';
import syncingImg from '../assets/syncStatus/syncing.png';
import { getBaseApiReact } from '../App';
import '../styles/CoreSyncStatus.css';
import { useTheme } from '@mui/material';

export const CoreSyncStatus = () => {
  const [nodeInfos, setNodeInfos] = useState({});
  const [coreInfos, setCoreInfos] = useState({});
  const [isUsingGateway, setIsUsingGateway] = useState(false);
  const theme = useTheme();

  useEffect(() => {
    const getNodeInfos = async () => {
      try {
        setIsUsingGateway(
          !!getBaseApiReact()?.includes('ext-node.qortal.link')
        );
        const url = `${getBaseApiReact()}/admin/status`;
        const response = await fetch(url, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const data = await response.json();
        setNodeInfos(data);
      } catch (error) {
        console.error('Request failed', error);
      }
    };

    const getCoreInfos = async () => {
      try {
        const url = `${getBaseApiReact()}/admin/info`;
        const response = await fetch(url, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const data = await response.json();
        setCoreInfos(data);
      } catch (error) {
        console.error('Request failed', error);
      }
    };

    getNodeInfos();
    getCoreInfos();

    const interval = setInterval(() => {
      getNodeInfos();
      getCoreInfos();
    }, 30000);

    return () => clearInterval(interval);
  }, []);

  const renderSyncStatusIcon = () => {
    const {
      isSynchronizing = false,
      syncPercent = 0,
      isMintingPossible = false,
      height = 0,
      numberOfConnections = 0,
    } = nodeInfos;
    const buildVersion = coreInfos?.buildVersion
      ? coreInfos?.buildVersion.substring(0, 12)
      : '';

    let imagePath = syncingImg;
    let message = `Synchronizing`;

    if (isMintingPossible && !isUsingGateway) {
      imagePath = syncedMintingImg;
      message = `${isSynchronizing ? 'Synchronizing' : 'Synchronized'} ${'(Minting)'}`;
    } else if (isSynchronizing === true && syncPercent === 99) {
      imagePath = syncingImg;
    } else if (isSynchronizing && !isMintingPossible && syncPercent === 100) {
      imagePath = syncingImg;
      message = `Synchronizing ${isUsingGateway ? '' : '(Not Minting)'}`;
    } else if (!isSynchronizing && !isMintingPossible && syncPercent === 100) {
      imagePath = syncedImg;
      message = `Synchronized ${isUsingGateway ? '' : '(Not Minting)'}`;
    } else if (isSynchronizing && isMintingPossible && syncPercent === 100) {
      imagePath = syncingImg;
      message = `Synchronizing ${isUsingGateway ? '' : '(Minting)'}`;
    } else if (!isSynchronizing && isMintingPossible && syncPercent === 100) {
      imagePath = syncedMintingImg;
      message = `Synchronized ${isUsingGateway ? '' : '(Minting)'}`;
    }

    return (
      <div
        className="tooltip"
        data-theme={theme.palette.mode}
        style={{ display: 'inline' }}
      >
        <span>
          <img
            src={imagePath}
            style={{ height: 'auto', width: '35px' }}
            alt="sync status"
          />
        </span>

        <div
          className="bottom"
          style={{
            right: 'unset',
            left: '55px',
            top: '10px',
          }}
        >
          <h3>Core Information</h3>
          <h4 className="lineHeight">
            Core Version:{' '}
            <span style={{ color: '#03a9f4' }}>{buildVersion}</span>
          </h4>
          <h4 className="lineHeight">{message}</h4>
          <h4 className="lineHeight">
            Block Height:{' '}
            <span style={{ color: '#03a9f4' }}>{height || ''}</span>
          </h4>
          <h4 className="lineHeight">
            Connected Peers:{' '}
            <span style={{ color: '#03a9f4' }}>
              {numberOfConnections || ''}
            </span>
          </h4>
          <h4 className="lineHeight">
            Using public node:{' '}
            <span style={{ color: '#03a9f4' }}>
              {isUsingGateway?.toString()}
            </span>
          </h4>
        </div>
      </div>
    );
  };

  return <div id="core-sync-status-id">{renderSyncStatusIcon()}</div>;
};