import { useEffect, useState } from 'react';
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
} from '@mui/material';

import { DOCS, ICONS } from 'consts';
import { WalletApi } from 'context';
import { useGetNetworkMetrics, useTranslation } from 'hooks';
import { correctAdaFormat } from 'utils';
import {
  AutomatedVotingOptionCurrentDelegation,
  AutomatedVotingOptionDelegationId,
} from 'types';
import { Typography } from 'components';
import { AutomatedVotingCard } from './automatedOptions/AutomatedVotingCard';

type AutomatedVotingOptionsProps = {
  currentDelegation?: string | null;
  delegate: (delegateTo: string) => void;
  votingPower: string;
  delegationInProgress?: string;
  isDelegationLoading?: string | null;
  pendingTransaction?: WalletApi['pendingTransaction'];
  txHash?: string | null;
};

export const AutomatedVotingOptions = ({
  currentDelegation,
  delegate,
  delegationInProgress,
  isDelegationLoading,
  pendingTransaction,
  votingPower,
  txHash,
}: AutomatedVotingOptionsProps) => {
  const { t } = useTranslation();
  // TODO: Get network metrics from useAppContext
  const { networkMetrics, fetchNetworkMetrics } = useGetNetworkMetrics();

  const [isOpen, setIsOpen] = useState<boolean>(false);

  const isDelegatedToAbstain =
    currentDelegation ===
    AutomatedVotingOptionCurrentDelegation.drep_always_abstain;
  const isDelegationToAbstainInProgress =
    delegationInProgress === AutomatedVotingOptionDelegationId.abstain;
  const isDelegatedToNoConfidence =
    currentDelegation ===
    AutomatedVotingOptionCurrentDelegation.drep_always_no_confidence;
  const isDelegationToNoConfidenceInProgress =
    delegationInProgress === AutomatedVotingOptionDelegationId.no_confidence;

  useEffect(() => {
    fetchNetworkMetrics();
  }, []);

  useEffect(() => {
    const shouldBeSetOpen =
      isDelegatedToAbstain ||
      isDelegatedToNoConfidence ||
      isDelegationToAbstainInProgress ||
      isDelegationToNoConfidenceInProgress;

    setIsOpen(shouldBeSetOpen);
  }, [
    isDelegatedToAbstain,
    isDelegatedToNoConfidence,
    isDelegationToAbstainInProgress,
    isDelegationToNoConfidenceInProgress,
  ]);

  return (
    <div>
      <Typography variant="title2" sx={{ mb: 2 }}>
        {t('dRepDirectory.delegationOptions')}
      </Typography>
      <Accordion
        data-testid="automated-voting-options-accordion"
        elevation={3}
        expanded={isOpen}
        onChange={(_, isExpanded) => setIsOpen(isExpanded)}
        sx={(theme) => ({
          bgcolor: `${theme.palette.lightBlue}80`,
          border: `1px solid ${theme.palette.neutralWhite}`,
        })}
      >
        <AccordionSummary
          expandIcon={<img alt="arrow" src={ICONS.arrowDownIcon} />}
          sx={{ borderRadius: 3, px: { xxs: 2, md: 3 } }}
        >
          <Typography>{t('dRepDirectory.automatedVotingOptions')}</Typography>
        </AccordionSummary>
        <AccordionDetails
          sx={{ p: { xxs: 2, md: 3 }, pt: { xxs: 0, md: 0 } }}
          data-testid="delegation-options-dropdown"
        >
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              gap: 2,
            }}
          >
            <AutomatedVotingCard
              dataTestId="abstain-delegation-card"
              description={
                isDelegatedToAbstain
                  ? t('dRepDirectory.delegatedToAbstainDescription')
                  : t('dRepDirectory.abstainCardDefaultDescription')
              }
              inProgress={isDelegationToAbstainInProgress}
              isDelegateLoading={
                isDelegationLoading ===
                AutomatedVotingOptionDelegationId.abstain
              }
              isSelected={isDelegatedToAbstain}
              onClickDelegate={() =>
                delegate(AutomatedVotingOptionDelegationId.abstain)
              }
              infoUrl={DOCS.voteAbstain}
              title={
                isDelegatedToAbstain
                  ? t('dRepDirectory.delegatedToAbstainTitle', {
                      ada: votingPower,
                    })
                  : t('dRepDirectory.abstainCardDefaultTitle')
              }
              votingPower={
                networkMetrics
                  ? correctAdaFormat(networkMetrics?.alwaysAbstainVotingPower)
                  : ''
              }
              transactionId={
                pendingTransaction?.delegate?.resourceId ===
                AutomatedVotingOptionDelegationId.abstain
                  ? pendingTransaction?.delegate?.transactionHash
                  : isDelegatedToAbstain
                    ? txHash
                    : undefined
              }
            />
            <AutomatedVotingCard
              dataTestId="no-confidence-delegation-card"
              description={
                isDelegatedToNoConfidence
                  ? t('dRepDirectory.delegatedToNoConfidenceDescription')
                  : t('dRepDirectory.noConfidenceDefaultDescription')
              }
              inProgress={isDelegationToNoConfidenceInProgress}
              isDelegateLoading={
                isDelegationLoading ===
                AutomatedVotingOptionDelegationId.no_confidence
              }
              isSelected={isDelegatedToNoConfidence}
              onClickDelegate={() =>
                delegate(AutomatedVotingOptionDelegationId.no_confidence)
              }
              infoUrl={DOCS.voteNoConfidence}
              title={
                isDelegatedToNoConfidence
                  ? t('dRepDirectory.delegatedToNoConfidenceTitle', {
                      ada: votingPower,
                    })
                  : t('dRepDirectory.noConfidenceDefaultTitle')
              }
              votingPower={
                networkMetrics
                  ? correctAdaFormat(
                      networkMetrics?.alwaysNoConfidenceVotingPower
                    )
                  : ''
              }
              transactionId={
                pendingTransaction?.delegate?.resourceId ===
                AutomatedVotingOptionDelegationId.no_confidence
                  ? pendingTransaction?.delegate?.transactionHash
                  : isDelegatedToNoConfidence
                    ? txHash
                    : undefined
              }
            />
          </Box>
        </AccordionDetails>
      </Accordion>
    </div>
  );
};