import React, { useContext } from 'react';
import { Link, useParams } from 'react-router-dom';
import { Button, Section } from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import { NO_NR_TERMS } from 'src/apollo/type-constants/contract';
import { NrContractTermBlock } from 'src/components/contract-detail/nr-contract-term-block';
import NrContractTermDetail from 'src/components/contract-detail/nr-contract-term-detail';
import { LinkButton } from 'src/components/shared/link-button';
import { ContractTermContext } from 'src/contexts/contract-term-context';
import { createNrTerms } from 'src/urls/frontend-royalties';
import type { GetContractQuery } from 'src/apollo/queries/contract/__generated__/get-contract';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';

type AbacusContract = NonNullable<GetContractQuery['abacusContract']>;
type ContractTerms =
    NonNullable<AbacusContract['contractTerms']> extends (infer T)[] ? T : null;

export interface NrContractTermsPropType {
    isButtonEnabled: boolean;
    isFeatureNrContractPageRedesignEnabled: boolean;
}

export const NrContractTerms: React.FC<NrContractTermsPropType> = ({
    isButtonEnabled,
    isFeatureNrContractPageRedesignEnabled,
}) => {
    const { contractId } = useParams<{ contractId: string }>();
    const { state } = useContext(ContractTermContext);
    const contractTerms: ContractTerms[] = state.contractTerms.nrTerms;
    const noTermsText = (
        <div className="ContractDetail-noNRTerms">
            <i>{NO_NR_TERMS}</i>
        </div>
    );

    return !isFeatureNrContractPageRedesignEnabled ? (
        <div className="ContractDetail-NRTerms">
            <h3 className="ContractDetail-NRTerms-header">Terms</h3>
            <RestrictedByAbacusProfileWrapper>
                <LinkButton
                    buttonSize="md"
                    disabled={!isButtonEnabled}
                    label="Add"
                    target={createNrTerms(contractId)}
                />
            </RestrictedByAbacusProfileWrapper>
            <hr />
            {contractTerms.length ? (
                contractTerms.map((term: ContractTerms, index) => (
                    <NrContractTermDetail term={term} key={index} />
                ))
            ) : (
                <>{noTermsText}</>
            )}
        </div>
    ) : (
        <Section>
            <Section.Header>
                <div className="d-flex flex-column" style={{ width: '100%' }}>
                    <div
                        className="d-flex flex-row align-items-center"
                        style={{ gap: '8px' }}
                    >
                        <Section.Title className="h3">Terms</Section.Title>
                        <RestrictedByAbacusProfileWrapper>
                            <Link
                                className="ml-auto"
                                data-testid="ContractDetail-nr-terms-button"
                                to={createNrTerms(contractId)}
                            >
                                <Button
                                    className="ContractDetail-nr-terms-addButton"
                                    data-testid="nr-terms-addButton"
                                    disabled={!isButtonEnabled}
                                    variant="primary"
                                >
                                    <span>&nbsp;+ Add&nbsp;</span>
                                </Button>
                            </Link>
                        </RestrictedByAbacusProfileWrapper>
                    </div>
                </div>
            </Section.Header>
            {isEmpty(contractTerms) ? (
                <Section.Body>
                    <Section>
                        <div className="mb-2 text-muted" data-testid="noTerms">
                            {NO_NR_TERMS}
                        </div>
                    </Section>
                </Section.Body>
            ) : (
                <Section.Body>
                    {contractTerms.map((term: ContractTerms, index) => (
                        <NrContractTermBlock key={index} term={term} />
                    ))}
                </Section.Body>
            )}
        </Section>
    );
};