// 'use no memo' — opt out of React Compiler memoization. `schedulesList` is
// populated asynchronously from an Apollo query and the render-path access
// `schedulesList.find(schedule => schedule.isAutoAdd)` crashes under the
// compiler's memoization ("Cannot read properties of undefined (reading
// 'isAutoAdd')"). Mirrors the opt-outs added for other detail routes in ACC-10480.
'use no memo';

import React, { useEffect, useState } from 'react';
import { Button, Label, SkeletonLoader } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { useParams, Link } from 'react-router-dom';
import { PageHeader } from '../shared/pageHeader';
import { useContributorBreadcrumbs } from 'src/hooks/breadcrumbs/contributor';
import { AbacusScheduleTargetType } from 'src/apollo/definitions/globalTypes';
import { useNRContributor } from 'src/apollo/queries/nr-contributors';
import { ContributionsList } from 'src/components/contributor-detail/contributions-list';
import {
    editContributorSchedule,
    getContributorScheduleDetail,
} from 'src/urls/frontend-royalties';
import { formatSchedulesList, reorderSchedulesList } from 'src/utils/schedules';
import { AddScheduleFormPopup } from '../schedule-form/add-schedule-form-popup';
import type { FormattedSchedule } from 'src/types/schedule';
import './styles.scss';

export const ContributorDetail: React.FC = () => {
    const [isScheduleModalOpen, setIsScheduleModalOpen] =
        useState<boolean>(false);
    const [schedulesList, setSchedulesList] = useState<FormattedSchedule[]>([]);
    const { contributorId } = useParams<{ contributorId: string }>();
    const { data, loading } = useNRContributor(contributorId);
    const breadcrumbs = useContributorBreadcrumbs();

    const findAutoAddSchedule = () =>
        schedulesList.find(schedule => schedule.isAutoAdd);

    useEffect(() => {
        if (data?.nrContributorById?.abacusSchedules) {
            const reorderedSchedules = reorderSchedulesList(
                data.nrContributorById.abacusSchedules
            );
            const formattedSchedules = formatSchedulesList(reorderedSchedules);
            setSchedulesList(formattedSchedules);
        }
    }, [data]);

    return (
        <div className="ContributorDetail">
            <PageHeader
                title={data?.nrContributorById?.name}
                breadcrumbs={breadcrumbs}
            >
                <Button
                    className="AddSchedule ml-auto"
                    data-testid="addScheduleBtn"
                    onClick={() => setIsScheduleModalOpen(true)}
                    variant="primary"
                >
                    Add Schedule
                </Button>
            </PageHeader>
            <div>
                <AddScheduleFormPopup
                    isAutoAddEnabled={!findAutoAddSchedule()}
                    isModalOpen={isScheduleModalOpen}
                    onCloseHandler={() => setIsScheduleModalOpen(false)}
                    targetId={contributorId}
                    targetType={AbacusScheduleTargetType.CONTRIBUTOR}
                />
            </div>

            <div className="ContributionsUnassigned">
                <div className="ContributionsUnassigned-header">
                    <Label text="Unassigned Contributions" />
                </div>
                <div className="ContributionsUnassigned-list">
                    <ContributionsList
                        hasAbacusSchedule={false}
                        includeOnlyValidContributions={true}
                    />
                </div>
            </div>

            <div className="ContributionSchedules">
                <div className="ContributionSchedules-header">
                    <Label text="Schedules (# Of Contributions)" />
                </div>
                <div className="ContributionSchedules-list">
                    {loading && (
                        <div className="ContributionSchedules-list-loading">
                            <SkeletonLoader />
                        </div>
                    )}
                    {!loading && !schedulesList.length ? (
                        <span className="NoResultsFound">No Schedules</span>
                    ) : (
                        schedulesList.map(schedule => (
                            <div
                                className="ContributionSchedules-list-item"
                                key={`${schedule.scheduleId}`}
                            >
                                <Link
                                    to={getContributorScheduleDetail(
                                        contributorId,
                                        schedule.scheduleId
                                    )}
                                >
                                    {`${schedule.scheduleName}`}{' '}
                                    {`(${schedule.attachmentCount})`}
                                </Link>
                                {schedule.isAutoAdd && (
                                    <span className="AutoAdd">
                                        <GlyphIcon name="check" size={12} />{' '}
                                        Auto add new
                                    </span>
                                )}
                                <span className="EditSchedule">
                                    <Link
                                        to={editContributorSchedule(
                                            contributorId,
                                            schedule.scheduleId
                                        )}
                                    >
                                        <GlyphIcon name="edit" size={16} />
                                    </Link>
                                </span>
                            </div>
                        ))
                    )}
                </div>
            </div>
        </div>
    );
};

export default ContributorDetail;