import type { FC } from 'react';
import React, { useState, useCallback } from 'react';
import { Sidecar } from '@theorchard/suite-components';
import ContributorSearchDropdown from 'src/components/contributorSearchDropdown';
import CreateContributorModal from 'src/components/createContributorModal';
import { useCreateContributorFF } from 'src/utils/features';
import {
    recordContributorFilter,
    recordArtistNameFilter,
} from 'src/utils/segment/filterEvents';
import CopyId from './components/copyId';
import ParticipantLookup from './components/participantLookup/participantLookup';
import type { Contributor, LookupParticipant } from 'src/data/types';

export const CLASSNAME = 'IdLookupSidecar';

export interface Props {
    open: boolean;
    closeSidecar: () => void;
}

const IdLookupSidecar: FC<Props> = ({ open, closeSidecar }) => {
    const [contributor, setContributor] = useState<Contributor>();
    const [selectedParticipant, setSelectedParticipant] =
        useState<LookupParticipant>();

    const handleContributorChange = useCallback(
        (c?: Contributor) => {
            recordContributorFilter('Create Page', c?.name);
            setContributor(c);
        },
        [setContributor]
    );

    const handleParticipantChange = ([participant]: LookupParticipant[]) => {
        setSelectedParticipant(participant);
        recordArtistNameFilter(participant?.name);
    };

    return (
        <Sidecar
            className={CLASSNAME}
            isOpen={open}
            onRequestClose={closeSidecar}
            header={$t(`neighbouringRights.idLookupSidecar.idLookup`)}
        >
            <div className={`${CLASSNAME}-body`}>
                <div className={`${CLASSNAME}-contributor`}>
                    <div className={`${CLASSNAME}-contributor-header`}>
                        {$t(`neighbouringRights.idLookupSidecar.contributor`)}
                    </div>
                    <ContributorSearchDropdown
                        onChange={handleContributorChange}
                        placeholder={$t(
                            `neighbouringRights.idLookupSidecar.enterContributorName`
                        )}
                        contributorId={contributor?.id}
                        displayUuid
                    />
                    {contributor && (
                        <div className={`${CLASSNAME}-contributor-result`}>
                            <CopyId
                                className={`${CLASSNAME}-legal-name`}
                                data={contributor.name}
                                lookupType="Contributor"
                                title={$t(
                                    `neighbouringRights.idLookupSidecar.contributor`
                                )}
                            />
                            <CopyId
                                data={contributor.id}
                                lookupType="Contributor"
                                title={$t(
                                    `neighbouringRights.idLookupSidecar.contributorId`
                                )}
                            />
                        </div>
                    )}
                </div>
                <div
                    className={`${CLASSNAME}-participant`}
                    data-testid={`${CLASSNAME}-participant-lookup`}
                >
                    <div className={`${CLASSNAME}-participant-header`}>
                        {$t(`neighbouringRights.idLookupSidecar.artist`)}
                    </div>
                    <ParticipantLookup
                        multi={false}
                        onChange={handleParticipantChange}
                        selectedParticipant={
                            selectedParticipant ? [selectedParticipant] : []
                        }
                    />
                    {selectedParticipant && (
                        <div className={`${CLASSNAME}-participant-result`}>
                            <span
                                className={`${CLASSNAME}-participant-result-header`}
                            >
                                {$t(
                                    `neighbouringRights.idLookupSidecar.primaryArtist`
                                )}
                            </span>
                            <span className={`${CLASSNAME}-participant-name`}>
                                {selectedParticipant.name}
                            </span>
                            <CopyId
                                data={selectedParticipant.participantId ?? ''}
                                lookupType="Participant"
                                title={$t(
                                    `neighbouringRights.idLookupSidecar.primaryArtistId`
                                )}
                            />
                        </div>
                    )}
                </div>

                {useCreateContributorFF() && <CreateContributorModal />}
            </div>
        </Sidecar>
    );
};

export default IdLookupSidecar;