import React from 'react';
import { Label, SkeletonLoader } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { useParams } from 'react-router-dom';
import { useScheduleById } from 'src/apollo/queries/schedule';
import { ContributionsList } from 'src/components/contributor-detail/contributions-list';
import { LinkButton } from 'src/components/shared/link-button';
import { AUTO_ADD_TEXT, NO_AUTO_ADD_TEXT } from 'src/constants';
import { useContributorBreadcrumbs } from 'src/hooks/breadcrumbs/contributor';
import { editContributorSchedule } from 'src/urls/frontend-royalties';
import { PageHeader } from '../shared/pageHeader';

const ScheduleDetail: React.FC = () => {
    const { contributorId, scheduleId } = useParams<{
        contributorId: string;
        scheduleId: string;
    }>();
    const { data, loading } = useScheduleById(scheduleId);
    const breadcrumbs = useContributorBreadcrumbs();

    return (
        <div className="ScheduleDetail">
            <PageHeader
                title={data?.abacusSchedule?.scheduleName}
                breadcrumbs={breadcrumbs}
            >
                <span className="AutoAdd ml-auto mr-4">
                    {loading && <SkeletonLoader />}
                    {!loading && data?.abacusSchedule.conditions?.autoAdd ? (
                        <span>
                            <GlyphIcon
                                name="check"
                                size={12}
                                className="text-success"
                            />{' '}
                            <i>{AUTO_ADD_TEXT}</i>
                        </span>
                    ) : (
                        <i>{NO_AUTO_ADD_TEXT}</i>
                    )}
                </span>
                <div className="EditScheduleButton">
                    <LinkButton
                        label="Edit"
                        target={editContributorSchedule(
                            contributorId,
                            scheduleId
                        )}
                    />
                </div>
            </PageHeader>

            <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="ContributionsAssigned">
                <div className="ContributionsAssigned-header">
                    <Label text="Assigned Contributions" />
                </div>
                <div className="ContributionsAssigned-list">
                    <ContributionsList
                        hasAbacusSchedule={true}
                        includeOnlyValidContributions={true}
                    />
                </div>
            </div>
        </div>
    );
};

export default ScheduleDetail;