import React, { useEffect, useState } from 'react';
import { LoadingSpinner } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import classNames from 'classnames';
import { isEmpty } from 'lodash-es';
import { Link } from 'react-router-dom';
import TableBasic from 'src/components/shared/table-basic';
import { getContributorDetail } from 'src/urls/frontend-royalties';
import { reorderSchedulesList } from 'src/utils/schedules';
import type { GetContractPartyListQuery } from 'src/apollo/queries/contract-party/__generated__/get-contract-party-list';
import { useIdentity } from '@theorchard/suite-frontend';
import { ABACUS_PROFILE } from 'src/constants';

type AbacusContractPartyItem =
    GetContractPartyListQuery['abacusContractParties']['items'][0];

export interface ContributorsListPropType {
    className?: string;
    addingContributorId?: string;
    contractContributors: AbacusContractPartyItem[];
    contractPartyListLoading: boolean;
    contributorsListHeader: string[];
    deletedContractParty?: any;
    noContributorsFoundText: any;
    setDeletedContractParty?: any;
    tableRowHover?: boolean;
}

export const ContributorsList: React.FC<ContributorsListPropType> = ({
    className,
    addingContributorId,
    contractContributors,
    contractPartyListLoading,
    contributorsListHeader,
    deletedContractParty,
    noContributorsFoundText,
    setDeletedContractParty,
    tableRowHover = true,
}) => {
    const { profileType } = useIdentity();
    const [contributorsList, setContributorsList] = useState<any[]>([]);
    const isAbacusProfile = profileType === ABACUS_PROFILE;

    useEffect(() => {
        formatContractContributorsList(contractContributors);
    }, [contractContributors, deletedContractParty, addingContributorId]);

    const formatSchedules = (abacusSchedules: any) =>
        !isEmpty(abacusSchedules) ? (
            <div>
                {abacusSchedules.map((s: any) => (
                    <div key={s.scheduleId}>
                        {`${s.scheduleName} - (${s.scheduleAttachments.totalCount})`}
                        {s.conditions?.autoAdd && (
                            <span className="AutoAdd">
                                <GlyphIcon name="check" size={12} />
                                <span className="AutoAdd-text">
                                    Auto add new
                                </span>
                            </span>
                        )}
                    </div>
                ))}
            </div>
        ) : (
            <div className="no-schedules">
                <i>No Schedules</i>
            </div>
        );

    const formatRemoveFromContractLink = (
        contractPartyId: string,
        contributorName: string
    ) => (
        <span
            onClick={() => {
                addingContributorId !== ''
                    ? false
                    : setDeletedContractParty({
                          contractPartyId,
                          contributorName,
                      });
            }}
            className={classNames('removeFromContract-link', {
                disabled:
                    deletedContractParty?.contractPartyId === contractPartyId ||
                    addingContributorId !== '',
            })}
            data-testid="remove-contributor"
        >
            <GlyphIcon name="trash" size={16} />
        </span>
    );

    const formatContractContributorsList = (
        items: AbacusContractPartyItem[] | [] | null
    ) => {
        const contributors = items
            ? items.map((contributor: AbacusContractPartyItem) => {
                  const {
                      contractPartyId,
                      contractPartyObject: { abacusSchedules, id, name },
                  }: any = contributor;
                  const contributorName = (
                      <div>
                          {isAbacusProfile ? (
                              <Link key={id} to={getContributorDetail(id)}>
                                  {name}
                              </Link>
                          ) : (
                              <span>{name}</span>
                          )}
                          <br />
                          <span className="ContractContributors-ContributorLabel">
                              {id}
                          </span>
                      </div>
                  );
                  const schedules = formatSchedules(
                      reorderSchedulesList(abacusSchedules)
                  );
                  const removeContractLink = formatRemoveFromContractLink(
                      contractPartyId,
                      name
                  );
                  const columns = [contributorName, schedules];
                  return {
                      id: contractPartyId,
                      cols:
                          contributorsListHeader.length === 3
                              ? [...columns, removeContractLink]
                              : columns,
                  };
              })
            : [];

        setContributorsList(contributors);
    };

    return (
        <div className={className} data-testid="contributorsList">
            <div className="ContractContributors-list-table">
                {!isEmpty(deletedContractParty) && <LoadingSpinner show />}
                <TableBasic
                    headers={contributorsListHeader}
                    hover={tableRowHover}
                    isLoading={contractPartyListLoading}
                    rows={contributorsList}
                    tableClassName="Contributors-list"
                />
                {isEmpty(contributorsList) &&
                    !contractPartyListLoading &&
                    noContributorsFoundText}
            </div>
        </div>
    );
};

export default ContributorsList;