import React from 'react';
import { Button, Label, Table } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { Link, useParams } from 'react-router-dom';
import NrContractTermCondition from 'src/components/contract-detail/nr-contract-term-condition';
import { CONTRACT_TERM_TYPES } from 'src/constants';
import { updateNrTerms } 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;
type ContractTermConditions =
    NonNullable<ContractTerms['conditions']> extends (infer T)[] ? T : null;
type ContractTermSchedules =
    NonNullable<ContractTerms['contractTermSchedules']> extends (infer T)[]
        ? T
        : null;

export interface NrContractTermDetailPropType {
    term: ContractTerms;
}

export const NrContractTermDetail: React.FC<NrContractTermDetailPropType> = ({
    term,
}) => {
    const { contractId } = useParams<{ contractId: string }>();
    const renderTermsConditionsTableHeader = (termType: string) => {
        return (
            <thead>
                <tr>
                    <td className="col-md-2">
                        <Label
                            text={
                                termType ==
                                CONTRACT_TERM_TYPES.CONTRIBUTOR_SCHEDULE
                                    ? 'Contributors'
                                    : 'Schedule'
                            }
                        />
                    </td>
                    <td className="col-md-3">
                        <Label text="Term Condition Name" />
                    </td>
                    <td className="col-md-2">
                        <Label text="Transaction type" />
                    </td>
                    <td className="col-md-2">
                        <Label text="Service" />
                    </td>
                    <td className="col-md-2">
                        <Label text="Country" />
                    </td>
                    <td className="col-md-1">
                        <Label text="Commission" />
                    </td>
                </tr>
            </thead>
        );
    };

    const renderTermsConditionsTableRows = (
        conditions: ContractTermConditions[] | null,
        contractTermSchedules: ContractTermSchedules[] | null
    ) => {
        const renderContractTermSchedules = () => {
            return contractTermSchedules
                ? contractTermSchedules.map((item, index) => (
                      <p key={index} className="schedule-item">
                          {'scheduleName' in item
                              ? `${item.scheduleName} (${
                                    item.scheduleAttachments?.totalCount || 0
                                })`
                              : item.name}
                          {'scheduleName' in item &&
                              item.conditions?.autoAdd && (
                                  <span className="AutoAdd">
                                      <GlyphIcon name="check" size={12} />
                                      <span className="AutoAdd-text">
                                          Auto add new
                                      </span>
                                  </span>
                              )}
                      </p>
                  ))
                : '';
        };

        return (
            <tbody>
                {conditions?.map((contractTermCondition, index) => (
                    <tr key={index} data-testid="NRTermsTableConditionRow">
                        {index == 0 && (
                            <td
                                rowSpan={conditions.length}
                                className="main-cell"
                            >
                                {renderContractTermSchedules()}
                            </td>
                        )}
                        <NrContractTermCondition
                            contractTermCondition={contractTermCondition}
                        />
                    </tr>
                ))}
            </tbody>
        );
    };

    const getTermTypeLabel = (targetType: string) => {
        switch (targetType) {
            case CONTRACT_TERM_TYPES.CONTRIBUTOR_SCHEDULE:
                return 'Contributor Only';
            case CONTRACT_TERM_TYPES.CONTRIBUTION_SCHEDULE:
                return 'Contribution Schedule';
            default:
                return '';
        }
    };

    return (
        <div
            className="ContractDetail-NRTerms-block"
            data-testid="NRTermsBlock"
        >
            <div className="header">
                <h3>
                    {term.contractTermName} <span>({term.contractTermId})</span>
                </h3>
                <RestrictedByAbacusProfileWrapper>
                    <Link to={updateNrTerms(contractId, term.contractTermId)}>
                        <Button className="ContractDetail-NRTerms-edit-btn">
                            Edit
                        </Button>
                    </Link>
                </RestrictedByAbacusProfileWrapper>
                <div>{getTermTypeLabel(term.termType)}</div>
            </div>
            <Table
                className="ContractDetail-NRTerms-detail"
                data-testid="NRTermsTable"
            >
                {renderTermsConditionsTableHeader(term.termType)}
                {renderTermsConditionsTableRows(
                    term.conditions,
                    term.contractTermSchedules
                )}
            </Table>
        </div>
    );
};

export default NrContractTermDetail;