import React from 'react';
import { HelpTooltip, Label, Section } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { useParams } from 'react-router-dom';
import { AbacusContractFlowthroughStatus } from 'src/apollo/definitions/globalTypes';
import {
    CONTRACT_FLOWTHROUGH_ALERT_INFO,
    CONTRACT_FLOWTHROUGH_STATUSES_MAP,
    NO_CONTRACT_FLOWTHROUGH_MSG,
} from 'src/apollo/type-constants/contract-flowthrough';
import { ContractFlowthroughButtons } from 'src/components/contract-detail/contract-flowthrough-buttons';
import type { AbacusContractFlowthrough } from 'src/types/abacus-contract-flowthrough';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';
import {
    isFlowthroughCalculationUsingRate,
    isFlowthroughCalculationUsingRecoupmentCap,
} from 'src/utils/contract-flowthrough';

export interface ContractFlowthroughProps {
    contractFlowthrough: AbacusContractFlowthrough | null;
}

export const ContractFlowthrough: React.FC<ContractFlowthroughProps> = ({
    contractFlowthrough,
}) => {
    const { contractId } = useParams<{ contractId: string }>();

    const STATUS_TOOLTIP_MSG = (
        <div>
            {contractFlowthrough?.statusLastModified} by&nbsp;
            {contractFlowthrough?.statusLastModifiedByIdentity?.name ??
                contractFlowthrough?.statusLastModifiedBy}
        </div>
    );

    const showRate = isFlowthroughCalculationUsingRate(
        contractFlowthrough?.referenceFlowthroughCalculation
            ?.referenceFlowthroughCalculationId
    );
    const showRecoupmentCap = isFlowthroughCalculationUsingRecoupmentCap(
        contractFlowthrough?.referenceFlowthroughCalculation
            ?.referenceFlowthroughCalculationId
    );

    return (
        <Section className="ContractDetail-flowthrough-section">
            <Section.Header>
                <div className="d-flex flex-column" style={{ width: '100%' }}>
                    <div className="d-flex flex-row align-items-center">
                        <Section.Title className="h3">
                            Flowthrough
                        </Section.Title>
                        <RestrictedByAbacusProfileWrapper>
                            <ContractFlowthroughButtons
                                contractFlowthrough={contractFlowthrough}
                                contractId={contractId}
                            />
                        </RestrictedByAbacusProfileWrapper>
                    </div>
                </div>
            </Section.Header>
            <Section.Body>
                <Section>
                    <Section.Body>
                        {contractFlowthrough ? (
                            <Page.Grid className="ContractDetail-flowthrough-details">
                                <Page.Col sm={12} md={6} lg={3}>
                                    <div className="flowthrough-rate-label">
                                        <div className="flowthrough-rate-label-text">
                                            <Label text="Rate" />
                                        </div>

                                        <div className="flowthrough-rate-label-tooltip">
                                            <HelpTooltip
                                                id="rate"
                                                message="Client's Share"
                                                testId="rateTooltip"
                                            />
                                        </div>
                                    </div>
                                    <div data-testid="rate">
                                        {showRate
                                            ? `${contractFlowthrough.flowthroughRate}%`
                                            : '-'}
                                    </div>
                                </Page.Col>

                                <Page.Col sm={12} md={6} lg={3}>
                                    <Label text="Calculation" />
                                    <div data-testid="calculation">
                                        {
                                            contractFlowthrough
                                                .referenceFlowthroughCalculation
                                                .flowthroughCalculation
                                        }
                                    </div>
                                </Page.Col>

                                <Page.Col sm={12} md={6} lg={3}>
                                    <Label text="Recoupment Cap" />
                                    <div data-testid="recoupment-cap">
                                        {showRecoupmentCap
                                            ? contractFlowthrough.recoupmentCap
                                            : '-'}
                                    </div>
                                </Page.Col>

                                <Page.Col sm={12} md={6} lg={3}>
                                    <Label text="Status" />
                                    <div
                                        className="flowthrough-status"
                                        data-testid="flowthrough-status"
                                    >
                                        <span
                                            className={`flowthrough-status-${contractFlowthrough.flowthroughStatus.toLowerCase()}`}
                                        >
                                            <GlyphIcon name="dot" size={16} />
                                        </span>
                                        <span className="flowthrough-status-text">
                                            {
                                                CONTRACT_FLOWTHROUGH_STATUSES_MAP[
                                                    contractFlowthrough
                                                        .flowthroughStatus
                                                ]
                                            }
                                            {
                                                // TODO ACC-8331: once the flowthrough functionality is automated,
                                                // we will also need to add condition for showing
                                                // "Automatically" text
                                                contractFlowthrough.flowthroughStatus ===
                                                    AbacusContractFlowthroughStatus.SHUTOFF && (
                                                    <span className="flowthrough-status-shutoff-text">
                                                        Manually
                                                    </span>
                                                )
                                            }
                                        </span>
                                        {contractFlowthrough?.statusLastModified &&
                                            contractFlowthrough?.statusLastModifiedBy && (
                                                <HelpTooltip
                                                    id="status"
                                                    message={STATUS_TOOLTIP_MSG}
                                                    testId="statusTooltip"
                                                />
                                            )}
                                    </div>
                                </Page.Col>
                                {contractFlowthrough
                                    ?.referenceFlowthroughCalculation
                                    ?.flowthroughCalculationName ===
                                    'manual' && (
                                    <Page.Col>
                                        <Label text="Calculation Comment" />
                                        <div
                                            className="flowthrough-calculation-comment"
                                            data-testid="flowthrough-calculation-comment"
                                        >
                                            {contractFlowthrough?.calculationComment
                                                ? contractFlowthrough?.calculationComment
                                                : '-'}
                                        </div>
                                    </Page.Col>
                                )}

                                <Page.Col>
                                    <div className="flowthrough-border"></div>
                                    <div className="flowthrough-alert">
                                        <span className="flowthrough-alert-info">
                                            <GlyphIcon name="info" size={16} />
                                        </span>
                                        <span className="flowthrough-alert-text">
                                            {CONTRACT_FLOWTHROUGH_ALERT_INFO}
                                        </span>
                                    </div>
                                </Page.Col>
                            </Page.Grid>
                        ) : (
                            <Page.Grid>
                                <Page.Col>
                                    <div className="mb2 text-muted">
                                        {NO_CONTRACT_FLOWTHROUGH_MSG}
                                    </div>
                                </Page.Col>
                            </Page.Grid>
                        )}
                    </Section.Body>
                </Section>
            </Section.Body>
        </Section>
    );
};