import type { FC } from 'react';
import React from 'react';
import { Modal, Button, Popover } from '@theorchard/suite-components';
import ReferenceChangeConfirmation from 'src/pages/songPage/components/metadataPopup/referenceChangeConfirmation';
import { formatNameVersion, getProductType } from 'src/utils/formatter';
import Basics from './basics';
import Contributors from './contributors';
import Metadata from './metadata';
import ProductMetadata from './productMetadata';
import type { OwnershipNrSoundRecording } from 'src/data/queries/getOwnershipNrSoundRecording';
import type { OwnershipNrTrack } from 'src/data/queries/getOwnershipNrTracks';

interface Permissions {
    canEdit: boolean;
}

interface Props {
    song: OwnershipNrSoundRecording;
    instance: OwnershipNrTrack | null;
    onModalClose: () => void;
    isOpen: boolean;
    setReferenceTrack: (id: string, srUuid: string) => void;
    permissions: Permissions;
}

export const CLASSNAME = 'MetadataPopup';

export const renderItem = (title: string, value: string) => (
    <div className={`${CLASSNAME}-item`}>
        <span className={`${CLASSNAME}-item-key`}>{title}</span>
        <span className={`${CLASSNAME}-item-value`}>{value}</span>
    </div>
);

export const renderItemLeft = (title: string, value: string) => (
    <div className={`${CLASSNAME}-block-item-left`}>
        <span className={`${CLASSNAME}-item-key`}>{title}</span>
        <span className={`${CLASSNAME}-item-value`}>{value}</span>
    </div>
);

export const renderItemRight = (title: string, value: string) => (
    <div className={`${CLASSNAME}-block-item-right`}>
        <span className={`${CLASSNAME}-item-key`}>{title}</span>
        <span className={`${CLASSNAME}-item-value`}>{value}</span>
    </div>
);

const MetadataPopup: FC<Props> = ({
    song,
    isOpen,
    onModalClose,
    instance,
    setReferenceTrack,
    permissions: { canEdit } = { canEdit: false },
}) => {
    const [showReferenceConfirmation, setShowReferenceConfirmation] =
        React.useState(false);
    const header = formatNameVersion(
        instance?.title ?? '',
        instance?.version ?? ''
    );
    const isReference = instance?.reference;
    const productType = `${getProductType(
        instance?.product?.contentType ?? '',
        instance?.recordingType ?? ''
    ).toUpperCase()}`;
    const referenceSubtitle = `${$t(
        'ownershipRights.metadataPopup.referenceInstance'
    )} • ${productType}`.toUpperCase();
    const confirmTitle = $t('ownershipRights.metadataPopup.confirmButton');

    const handleOnConfirm = () => {
        if (!isReference) {
            setReferenceTrack(instance?.id ?? '', song.id);
        }
        setShowReferenceConfirmation(false);
        onModalClose();
    };

    return (
        <Modal
            className={CLASSNAME}
            isOpen={isOpen}
            title={header}
            onRequestClose={() => {
                setShowReferenceConfirmation(false);
                onModalClose();
            }}
        >
            <div className={`${CLASSNAME}-sub-header`}>
                <div>
                    {isReference
                        ? referenceSubtitle
                        : productType.toUpperCase()}
                </div>
                {!isReference && canEdit && (
                    <Popover
                        id="ReferenceConfirmation"
                        contentClassName={`${CLASSNAME}-reference-confirmation`}
                        content={
                            <ReferenceChangeConfirmation
                                onCancel={() =>
                                    setShowReferenceConfirmation(false)
                                }
                                onConfirm={handleOnConfirm}
                            />
                        }
                        show={showReferenceConfirmation}
                        placement="bottom"
                    >
                        <Button
                            variant="quartenary"
                            size="lg"
                            className={`${CLASSNAME}-reference-btn`}
                            onClick={() => setShowReferenceConfirmation(true)}
                        >
                            {confirmTitle}
                        </Button>
                    </Popover>
                )}
            </div>
            <div className={`${CLASSNAME}-separator`} />
            <div className={`${CLASSNAME}-main-body`}>
                <div className={`${CLASSNAME}-sound-recording`}>
                    <Basics song={song} instance={instance} />
                    <Metadata song={song} instance={instance} />
                </div>
                <Contributors song={song} />
                <ProductMetadata song={song} instance={instance} />
            </div>
        </Modal>
    );
};

export default MetadataPopup;